在Web上动态更改SVG图像的样式

Question

我创建了一个非常简单的SVG图像logo.svg，只包含一个蓝色填充和白色笔划的路径。

问题在于我需要根据我在网站上使用它的位置来设置不同的样式：

• 放置1：应用阴影
• 放置2：更改填充颜色
• 放置3：更改笔触颜色
• 放置4：更改笔划宽度
• 将来可能更多...

这种情况下的最佳做法是什么？我是否需要为SVG图像的所有“演示”创建多个文件？

如果我必须创建多个文件，我可以在一个地方定义路径，所以如果我将来需要调整它，我将无需在无数的地方进行调整吗？

Answer 1

SVG可以像CSS一样通过CSS设置样式，但您需要它来内联它，或将其包含为<object>。然后你只需要添加正确的选择器来设置样式。

例如，同一个圆圈显示为红色或绿色，具体取决于它出现的部分：

.section1 circle
{
  fill: #F00;
}

.section2 circle
{
  fill: #0F0;
}

<div class="section1">
<svg>
  <circle cx="50" cy="50" r="50" />
</svg>
</div>

<div class="section2">
<svg>
  <circle cx="50" cy="50" r="50" />
</svg>
</div>

您可以在jsfiddle sample中找到有关SVG的更多信息并设置样式。