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

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

在外部存储 SVG 图形并通过链接访问它们时，通过外部 CSS 设置它们的样式可能会造成挑战。在这种情况下，CSS 文件无法直接修改 SVG 的内容。

外部 CSS 限制

您的外部 CSS 文件“main.css”只会影响SVG 的内容（如果它内联包含在 HTML 中）。这意味着以下代码片段：

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

不会受到“main.css”中 CSS 的影响。

在 SVG 中应用样式

要设置外部存储的 SVG 样式，您需要在 SVG 文件本身中定义 CSS。您可以使用样式标签：

<!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 或创建具有不同样式的单独 PNG。

以上是如何使用 CSS 设置外部链接 SVG 的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！