Question

我已经在这里阅读了有关使用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>

Answer 1

回答有点过期，但值得为其他人提供参考。

基本上，可以与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;
}

currentColor

您还可以使用SVG中的currentColor关键字将颜色应用于其中的某些元素，例如：

<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;
}

JS Fiddle

如果你需要在不同的网站/主题中使用相同的SVG（例如黑暗和光明），这可以很方便，以便用CSS轻松切换SVG颜色。

缓存/性能考虑：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>

JS Fiddle

这称为克隆，并允许您利用可通过CSS控制的可缓存SVG！

希望这有帮助！

Answer 2

尝试使用内联svg而不是外部svg源，然后你可以控制

无法使用CSS样式控制SVG图标填充颜色

2 个答案:

currentColor

缓存/性能考虑：SVG克隆