我有几个SVG图形,我想通过我的外部样式表修改颜色,而不是直接在每个SVG文件中修改。我不是将图形插入行中,而是将它们存储在我的图像文件夹中并指向它们。
我以这种方式实现了它们,以使工具提示能够正常工作,并且我还将每个工具提示都包装在<a>标签中以允许链接。
<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图形的颜色,但是我不会失去工具提示和链接功能。(尽管我可能没有工具提示也可以生活。)谢谢!
仅当HTML内联包含SVG文件时,您的main.css文件才会对SVG的内容产生影响:
<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。
您可以使用样式标签来实现:
<!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>
您可以使用服务器端的工具根据活动样式更新样式标签。在红宝石中,您可以使用Nokogiri实现此目的。SVG只是XML。因此,可能有许多可以实现此目的的XML库。
如果您无法执行此操作,则只需使用它们就好像它们是PNG一样。为每种样式创建一个集合,然后内联保存它们的样式。