如何使用外部 CSS 设置 SVG 样式? [英] How to style SVG with external CSS?
问题描述
我有几个 SVG 图形，我想通过我的外部样式表修改颜色 - 而不是直接在每个 SVG 文件中.我没有将图形放在内嵌，而是将它们存储在我的图像文件夹中并指向它们.
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.
我以这种方式实现了它们以允许工具提示工作，并且我还将每个都包装在 <a> 标签中以允许链接.
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>
这是SVG图形的代码:
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>
我将以下内容放在我的外部 CSS 文件 (main.css) 中:
I put the following in my external CSS file (main.css):
.socIcon g {fill:red;}
但它对图形没有影响.我也试过 .socIcon g path {} 和 .socIcon path {}.
Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.
有些地方不对，也许我的实现不允许外部 CSS 修改，或者我错过了一步?我真的很感激你的帮助！我只需要能够通过我的外部样式表修改 SVG 图形的颜色，但我不能失去工具提示和链接功能.(不过我也许可以不用工具提示.)谢谢！
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!
推荐答案
如果 SVG 文件内嵌在 HTML 中，则您的 main.css 文件只会对 SVG 的内容产生影响:
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>
如果您想将 SVG 保存在文件中，则需要在 SVG 文件内定义 CSS.
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>
您可以使用服务器端的工具根据活动样式更新样式标签.在 ruby 中，您可以使用 Nokogiri 实现这一点.SVG 只是 XML.所以可能有很多可用的 XML 库可以实现这一点.
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.
如果您不能这样做，您将不得不像使用 PNG 一样使用它们；为每个样式创建一个集合，并内联保存它们的样式.
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屋！
