更改 <svg> 和 <path> 元素背景颜色

Question

我目前正在卸载我网站上的页面构建器，
但我想保留它的一些样式。

我复制了一个元素的 html，它曾经在条纹上有红色，现在是黑色/灰色，但我在更改它们的颜色时遇到了问题。

我唯一能改变的颜色是background。

<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" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
    <path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
    <path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>	

提前感谢您的帮助！

Answer 1

您可能希望包含页面构建器中的 css 文件以将样式添加到 HTML 页面。

但是现在，如果您希望您的<svg> 是红色的，请使用属性fill：

path {
  fill: red;
}

<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" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
    <path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
    <path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>