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

Z时代
2024-01-10
分类：问答

我有几个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路径{}和.socIcon路径{}。

某些情况不正确，也许我的实现不允许外部CSS修改，或者我错过了一步？非常感谢您的帮助！我只需要能够通过我的外部样式表修改SVG图形的颜色，但是我不会失去工具提示和链接功能。（尽管我可能没有工具提示也可以生活。）谢谢！

回答：

仅当HTML内联包含SVG文件时，您的main.css文件才会对SVG的内容产生影响：

<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。

您可以使用样式标签来实现：

<!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>