如何用外部CSS样式SVG？ [英] How to style SVG with external CSS?
问题描述
我有几个SVG图形我想修改的颜色通过我的外部样式表 - 不是直接在每个SVG文件。我不是把图形放在行中，而是将它们存储在我的图像文件夹中并指向它们。
我已经实现了这些图形以允许工具提示工作，并且我还将每个包装在< a> 标签中以允许链接。
code>< a href ='http：//youtube.com / ...'target ='_ blank'>< img class ='socIcon'src ='images / socYouTube.svg'title =在YouTube上观看我的视频'alt ='YouTube'/>< / a>
这里是SVG图形的代码：
<？xml version =1.0encoding =utf-8？>
<？xml-stylesheet href =stylesheets / main.csstype =text / css？>
<！DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http：//www.w3 .org / 1999 / xlinkviewBox =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图形的颜色，但我不能失去工具提示和链接能力（我可能能够生活没有工具提示虽然。）谢谢！
解决方案您的main.css文件将只会影响SVG，如果SVG文件包含在HTML中的内联：
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
< html> ;
< body>
< svg version =1.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999 / xlinkviewBox =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#StyleElement示例
<！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/svgversion =1.1
width =50pxheight =50pxviewBox =0 0 50 50>
< defs>
< style type =text / css>
.socIcon g {
fill：red;
}
]]>< / style>
< / defs>
< g> ;
< path d =M28.44 ....... />
< / g>
< / svg>
您可以使用服务器端的工具根据活动样式更新样式标签。在ruby你可以实现这个与Nokogiri。 SVG只是XML。所以可能有很多XML库可以实现这一点。
如果你不能这样做，你将不得不使用它们，他们是巴布亚新几内亚;为每个样式创建一个集合，并以内联方式保存样式。
I have several SVG graphics I'd like to modify the colors of via my external style sheets - not directly within each SVG file. I'm not putting the graphics in-line, but storing them in my images folder and pointing to them.
I have implemented them in this way to allow tooltips to work, and I also wrapped each in an
<a>tag to allow a link.<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>And here is the code of the SVG graphic:
<?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>I put the following in my external CSS file (main.css):
.socIcon g {fill:red;}Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.
Something isn't right, perhaps my implementation doesn't allow external CSS modifications, or I missed a step? I'd really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability. (I may be able to live without tooltips though.) Thanks!
解决方案Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:
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>If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.
You can do it with a style tag:
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>You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.
If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.
这篇关于如何用外部CSS样式SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
