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

debugcn 发表于 Dev

蒂姆·冯·卡内尔

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

我复制了一个元素的 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>

提前感谢您的任何帮助！

马修斯古巴

您可能希望包含来自页面构建器的 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。