我已经阅读了这里所有关于使用 CSS 设置 svg 填充颜色样式的帖子，但没有运气。
我想要的是能够制作带有链接的图标。我的外部 svg 文件是灰色的，但我想用 css 使其变为红色，并在悬停时将颜色更改为黄色。
我想我的目标是 SVG 错误。请帮忙。我的测试在这里： testpage
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style type="text/css">
<!--
.svgicon {
fill: red;
}
.svgicon:hover {
fill: yellow;
}
-->
</style>
<body>
<table width="100%" border="0" class="tabelform">
<tr>
<td width="100%"><a href="xxx.asp" class="svgicon"><object type="image/svg+xml" data="S/Images/new.svg" height="18" width="18"></object>test icon</a></td>
</tr>
</table>
</body>
</html>
回答有点迟，但值得他人参考。
基本上，唯一可以与 CSS 结合使用的 SVG 用法是内联用法。
这意味着您可以将 SVG 标记直接放入 HTML 源代码中，如下所示：
<div class="my-svg">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
</div>
注意：此 SVG 已使用 SVGO 进行优化，然后手动编辑以包含和 ID
您现在可以使用 CSS 控制 SVG，如下所示：
.my-svg {
fill: pink;
}
.my-svg:hover {
fill: red;
}
您还可以使用currentColorSVG 中的关键字将颜色应用于其中的某些元素，例如：
<div class="my-svg">
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</div>
.my-svg {
color: red;
}
如果您需要在不同的网站/主题（例如深色和浅色）中使用相同的 SVG，以便使用 CSS 轻松切换 SVG 颜色，这会很方便。
您还应该记住，将内联 SVG 用于重复图像（例如图标）并不是一个好主意，因为它们不能被缓存（SVG 代码将在整个 HTML 中重复，从而增加最终文件大小）。
相反，我喜欢使用的一种方法是在我的页面顶部创建一个 SVG 索引，其中包含我想在页面上使用的所有 SVG，例如：
<svg xmlns="http://www.w3.org/2000/svg" class="svg-index">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</svg>
确保将 SVG 索引设置为display: none以便它不会显示在页面上。
您现在可以使用以下xlink:href属性在整个页面中重复使用这些 SVG ：
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
这称为克隆，并允许您利用可以用 CSS 控制的可缓存 SVG！
希望这可以帮助！