如何更改图像.svg的样式[重复]

Posted 2023-02-22

【中文标题】如何更改图像.svg的样式[重复]

【英文标题】：How to change styles of image .svg [duplicate]

【发布时间】：2021-12-31 12:55:37

【问题描述】：

我有一个 SVG 图像，我使用下一个 html 将其插入

<img alt="" src="src/icons/speedometer-outline.svg" />

如何从 CSS 或 HTML 更改此图像的样式？

当我使用<object> 时，样式不会改变。我认为我做错了什么。正确的方法是什么？

【参考方案1】：

这取决于。如果您通过<svg> 标签放入您的SVG，那么您可以这样设置样式。像这样：

svg 
  style: styles;

或者，因为您没有使用<svg> 标记和img，而是您可以将一个类应用于您的图像来设置它的样式。它看起来像：

<img class="classname" src="src/icons/speedometer-outline.svg"  />

.classname 
    style: styles;

如果您不想使用 CSS，可以在 HTML 中使用内联样式，如下所示：

<img style="style: styles;" src="src/icons/speedometer-outline.svg"  />

【参考方案2】：

这取决于你所说的“改变这张图片的风格”是什么意思。

如果您将 SVG 内部元素的样式直接放入 html（使用标签而不是标签），您将可以更好地控制其内部元素的样式。

<svg  >
  <circle cx="50" cy="50" r="40" stroke="red" stroke- fill="black" />
</svg>

然后您可以将类/id 添加到 SVG 中的特定元素。 更多信息在here、here 和here。

你也可以使用标签：

<object type="image/svg+xml" data="image.svg"></object>