如何使用外部CSS样式SVG?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (359)

我有几个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图形的颜色,但我不能失去工具提示和链接功能。(尽管我可能没有工具提示可以生活)。

提问于
用户回答回答于

如果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文件,CSS需要在SVG文件中定义。

你可以用一个样式标签来完成它:

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>

可以使用服务器端的工具根据活动样式更新样式标签。在红宝石中,你可以用Nokogiri来实现。SVG只是XML。所以可能有很多XML库可以实现这一点。

如果你无法做到这一点,你将不得不使用它们,就好像它们是PNG一样; 为每个样式创建一个集合,并将其样式保存在内联中。

用户回答回答于

你可以做你想做的事情,但有一个(重要的)警告:你的符号中的路径不能通过外部CSS单独设置 - 你只能用这个方法设置整个符号的属性。因此,如果符号中有两条路径,并希望它们具有不同的填充颜色,则这不起作用,但如果希望所有路径都相同,则应该可以工作。

在你的html文件中,你需要这样的东西:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

在外部的SVG文件中,你需要这样的东西:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

svg标签上的类(在你的html中)从交换fill-redfill-blue和ta-da ...你有蓝色而不是红色。

由于内联CSS优先,因此可以通过将外部CSS与某些内嵌CSS在特定路径上进行混合和匹配来部分解决可以单独使用外部CSS定位路径的限制。如果你想在彩色背景上做一个白色的图标,你想通过外部CSS来改变背景的颜色,但是图标本身总是白色的(或者反之亦然),这种方法就可以工作。因此,使用和以前一样的HTML和类似这样的svg代码,你会得到一个红色的背景和一个白色的前景路径:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

扫码关注云+社区

领取腾讯云代金券