我有几个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图形的颜色,但我不能失去工具提示和链接功能。(不过,我可能没有工具提示也能活下去。)谢谢!
发布于 2013-12-22 00:12:07
只有当main.css文件内联包含在HTML中时,它才会对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一样使用它们;为每个样式创建一个集合,并以内联方式保存它们的样式。
发布于 2014-10-14 04:18:17
您可以做您想做的事情,但有一个(重要的)警告:您的符号中的路径不能通过外部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>
发布于 2019-12-29 05:25:58
您可以使用以下命令在SVG文件中包含指向外部css文件的链接:
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
你需要把这个放在开始标签后面:
<svg>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
<g>
<path d=.../>
</g>
</svg>
这并不是一个完美解决方案,因为您必须修改svg文件,但只需修改一次,就可以在一个css文件中为所有svg文件完成所有样式更改。
https://stackoverflow.com/questions/18434094
复制相似问题