腾讯云·社区
如何使用外部CSS样式SVG？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 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-red到fill-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>
CSS
扫码关注云+社区
领取腾讯云代金券