如何样式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>