卸载页面构建器后，如何修改<svg>中<path>的条纹颜色？

嘿，我来帮你搞定这个SVG条纹颜色的问题！

你遇到的情况应该是原来的页面构建器给这个SVG的<path>元素设置了红色填充样式，卸载后这个样式丢失了，所以SVG默认用黑灰色（加上opacity:0.33就显得更暗）来渲染条纹。虽然你说“仅能修改背景色”，但既然你能拿到SVG的HTML代码，其实可以直接给<path>添加颜色属性来恢复红色条纹，具体方法如下：

方法一：直接给path添加fill属性 #

在你的<path>标签里，添加fill属性设置成你想要的红色，比如：

<svg xmlns="http://www.w3.org/2000/svg" style="max-height:100px; margin-bottom: 30px;" viewBox="0 0 1000 100" preserveAspectRatio="none">
  <path style="width: 2500px;" opacity="0.33" fill="#ff3333" d="M473,67.3c-203.9,..."/>
</svg>

这里#ff3333是偏亮的红色，你可以换成任何你需要的十六进制、RGB或RGBA颜色值。

方法二：在style属性里添加fill样式 #

如果你习惯用内联样式，也可以把fill写在style里：

<path style="width: 2500px; opacity:0.33; fill:#e52b50;" d="M473,67.3c-203.9,..."/>

如果你真的只能修改背景色（无法编辑SVG代码） #

如果因为某些限制你确实只能修改外层背景，那可以尝试用CSS滤镜来调整颜色，但这个方法比较局限，比如：

/* 假设SVG的父容器是这个类 */
.svg-container {
  background: #ff0000;
  filter: invert(1) grayscale(1);
}

不过这个方法会把整个SVG的颜色都反转，不如直接修改SVG内部的fill属性来得精准。

内容的提问来源于stack exchange，提问作者Tim von Känel