如何样式SVG与外部CSS？
我有几个SVGgraphics，我想通过我的外部样式表修改颜色 – 不是直接在每个SVG文件中。 我不是把graphics放在线上，而是将它们存储在我的图像文件夹中并指向它们。
我已经以这种方式实现了它们，以允许工具提示工作，并且我还将每个包装在<a>标记中以允许链接。
<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
这里是SVGgraphics的代码：
<?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;}
但它对graphics没有影响。 我也试过.socIcon gpath{}和.socIconpath{}。
有些东西是不对的，也许我的实现不允许外部CSS修改，或者我错过了一个步骤？ 我真的很感谢你的帮助！ 我只需要通过我的外部样式表修改SVGgraphics的颜色，但我不能失去工具提示和链接能力。 （虽然我也许可以没有工具提示）。谢谢！
如果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>
您可以使用服务器端的工具根据活动样式更新样式标签。 在ruby，你可以用Nokogiri来实现。 SVG只是XML。 所以可能有很多XML库可以实现这一点。
如果你无法做到这一点，你将不得不使用它们，就好像它们是PNG一样; 为每个样式创build一个集合，并将其样式保存在内联中。
你可以做任何你想做的事情，一个（重要的）警告：你的符号中的path不能通过外部的CSS独立的样式 – 你只能用这个方法设置整个符号的属性。 所以，如果你的符号中有两条path，并希望它们具有不同的填充颜色，这将不起作用，但是如果你希望所有的path都是相同的，这应该是有效的。
在你的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优先，因此可以通过在特定path上混合和匹配外部CSS与某些内嵌CSS来部分解决可以单独使用外部CSS定位path的限制。 如果你想在彩色背景上做一个白色的图标，你可以通过外部的CSS来改变背景的颜色，但是图标本身总是白色的（反之亦然），这种方法是可行的。 所以，使用和以前一样的HTML，像这样的svg代码，你会得到一个红色的背景和一个白色的前景path：
<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>
应该可以通过首先内联外部svg图像。 看这里例如：
用内联Svg |replace所有的Svg图像 JAVASCRIPT | 代码片段库由Jess Frazelle
你可以采取的一种方法就是使用CSSfilter来改变浏览器中SVGgraphics的外观。
例如，如果您有一个在SVG代码中使用红色填充颜色的SVGgraphics，则可以使用180度的色调旋转设置将其变为紫色：
#theIdOfTheImgTagWithTheSVGInIt { filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); -moz-filter: hue-rotate(180deg); -o-filter: hue-rotate(180deg); -ms-filter: hue-rotate(180deg); }
尝试使用其他色调旋转设置来查找所需的颜色。
清楚的是，上面的CSS出现在应用于HTML文档的CSS中。 您正在HTML代码中deviseimg标签，而不是deviseSVG的代码。
请注意，这不适用于有黑色或白色或灰色填充的graphics。 你必须有一个真正的颜色在那里旋转的颜色的色调。
可以通过在JavaScript中dynamic创build样式元素并将其附加到SVG元素来设置SVG的样式。 哈克，但它的作品。
<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg"> Your browser does not support SVG </object> <script> var svgHolder = document.querySelector('object#dynamic-svg'); svgHolder.onload = function () { var svgDocument = svgHolder.contentDocument; var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style"); // Now (ab)use the @import directive to load make the browser load our css style.textContent = '@import url("/css/your-dynamic-css.css");'; var svgElem = svgDocument.querySelector('svg'); svgElem.insertBefore(style, svgElem.firstChild); }; </script>
如果你愿意的话，你可以在PHP中dynamic地生成JavaScript，事实上，这在JavaScript中是可能的，这将带来无数的可能性。
在<image>标记中使用时，出于隐私原因，SVG必须包含在单个文件中。 这bugzilla错误有更多的细节，为什么这是如此。 不幸的是，你不能使用不同的标签，比如<iframe>因为它不能作为链接工作，所以你必须把CSSembedded到文件本身的<style>标签中。
另外一种方法是将SVG数据放在主html文件中
<a href='http://youtube.com/...' target='_blank'> <svg 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> </a>
您可以使用HTML <link>标记对外部CSS文件进行设置。
“我实际上会根据用户为我的网站select的颜色scheme来改变这些图像的颜色。” 约旦 10小时前
我build议你为此使用PHP。 没有图标字体的确没有更好的方法，如果你拒绝使用它们，你可以试试这个：
<?php header('Content-Type: image/svg+xml'); echo '<?xml version="1.0" encoding="utf-8"?>'; $color = $_GET['color']; ?> <!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 fill="<?php echo $color; ?>" d="M28.44..."/> </g> </svg>
以后你可以使用这个文件作为filename.php?color=#ffffff来获得所需颜色的svg文件。
如果您使用<object>标签来embedded您的svg，那么可以使用外部css样式表的dynamic样式。
这个例子会在点击一个父元素的时候向根<svg>标签添加一个类。
file.svg：
<?xml-stylesheet type="text/css" href="../svg.css"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox=""> <g> <path/> </g> </svg>
html：
<a class="parent"> <object data="file.svg"></object> </a>
jquery：
$(function() { $(document).on('click', '.parent', function(){ $(this).find('object').contents().find('svg').attr("class","selected"); } });
点击父元素：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">
那么你可以pipe理你的CSS
svg.css：
path { fill:none; stroke:#000; stroke-miterlimit:1.41; stroke-width:0.7px; } .selected path { fill:none; stroke:rgb(64, 136, 209); stroke-miterlimit:1.41; stroke-width:0.7px; }
什么对我有用：带有@import规则的样式标签
<defs> <style type="text/css"> @import url("svg-common.css"); </style> </defs>
