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

【问题标题】：How to change styles of image .svg [duplicate]如何更改图像.svg的样式[重复]
【发布时间】：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" alt="" />

.classname {
    style: styles;
}

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

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

【讨论】：

【解决方案2】：

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

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

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

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

你也可以使用标签：

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

【讨论】：