新手上路，请多包涵

我有几个 SVG 图形，我想通过我的外部样式表修改颜色 - 而不是直接在每个 SVG 文件中。我没有将图形嵌入，而是将它们存储在我的图像文件夹中并指向它们。

我以这种方式实现了它们以允许工具提示工作，并且我还将每个都包装在一个 <a> 标记中以允许链接。

 <a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

这是 SVG 图形的代码：

 <?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

我将以下内容放在我的外部 CSS 文件 (main.css) 中：

 .socIcon g {fill:red;}

但它对图形没有影响。我也试过 .socIcon g path {} 和 .socIcon path {} 。

有什么不对劲，也许我的实现不允许外部 CSS 修改，或者我错过了一步？我真的很感谢你的帮助！我只需要能够通过我的外部样式表修改 SVG 图形的颜色，但我不能失去工具提示和链接能力（尽管我可能可以在没有工具提示的情况下生活）。

原文由 Jordan H 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css svg

阅读 2.1k

2 个回答

得票最新

社区维基

发布于
2022-10-09

✓ 已被采纳

如果 SVG 文件内嵌在 HTML 中，您的 main.css 文件只会对 SVG 的内容产生影响：

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

 <html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

如果要将 SVG 保存在文件中，则需要在 SVG 文件中定义 CSS。

您可以使用样式标签来做到这一点：

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

您可以使用服务器端的工具根据活动样式更新样式标签。在 ruby 中，您可以使用 Nokogiri 来实现这一点。 SVG 只是 XML。因此，可能有许多可用的 XML 库可以实现这一点。

如果您无法做到这一点，您将不得不像使用 PNG 一样使用它们；为每种样式创建一个集合，并内联保存它们的样式。

原文由 raddrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-10-09

如此处的答案和其他相关问题中所述，样式表仅适用于当前 DOM。因此，您需要通过将 svg 内联到 html 中或使用 javascript 将其包含在 DOM 中来使 svg 成为文档 DOM 的一部分。

这就是我最终在那里做的事情：

 <object type="image/svg+xml" data="illustration.svg"
onload="this.parentNode.replaceChild(this.contentDocument.documentElement, this);">
</object>

虽然该解决方案对我来说非常有效， 但只能在您控制的文档上使用它，因为从不受信任的源内联加载 svg 使该源能够在 HTML 中至少包含任意脚本、css 和其他元素，从而破坏沙箱。

我还没有研究过缓存在这方面的效果如何，但它应该与 img 标签一样好用，因为 javascript 函数是在元素加载后运行的。随意编辑这个。

如果禁用了 javascript，则 svg 不会包含在 DOM 中，并且不会应用样式，因此请确保默认样式可用。具有后备功能的 CSS 自定义属性（变量）非常适合该用例。

原文由 MayeulC 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何使用外部 CSS 设置 SVG 样式？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？

Stack Overflow 翻译