如何使用外部CSS设置SVG样式？
我有几个SVG图形，我想通过我的外部样式表修改颜色，而不是直接在每个SVG文件中修改。我不是将图形插入行中，而是将它们存储在我的图像文件夹中并指向它们。
我以这种方式实现了它们，以使工具提示能够正常工作，并且我还将每个工具提示都包装在<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一样。为每种样式创建一个集合，然后内联保存它们的样式。
-
问题内容： 是否可以像使用文本一样使用CSS为外部.svg设置样式？我想念什么？我的标记和CSS看起来像这样： 问题答案： 如果像引用标签一样通过引用外部文件来包含svg图像，则svg图像中的元素将不包含在主文档DOM树中。他们组成了自己的树。因此，外部图像中的元素无法通过主文档中的CSS选择器进行匹配。 您可以像大多数其他元素一样设置元素的样式，例如为其设置边框。但是您不能（至少这样）访问外部图
-
问题内容： 我有使用内联样式的标记，但是我无权更改此标记。如何仅使用CSS覆盖文档中的内联样式？我不想使用jQuery或JavaScript。 HTML： CSS： 问题答案： 覆盖内联样式的唯一方法是使用CSS规则旁边的关键字。以下是一个示例。 重要笔记： 使用不是一个好的做法。因此，您应避免同时使用内联样式。 将关键字添加到任何CSS规则后，该规则就可以 强行优先 于该元素的 所有其他CSS规
-
问题内容： 当我开始在textarea中写入文本时，我希望带有div框的外部div的边框变为实心而不是虚线，但是在某种情况下：focus不适用于。如果它与：active一起使用，为什么它与：focus不一起使用呢？ 有什么想法吗？ （注意。我希望DIV的边框变为实线，而不是文本区域） 问题答案： 虽然不能仅通过CSS / HTML来实现，但是可以通过JavaScript来实现（不需要库）： 顺便说
-
问题内容： 我正在尝试使用以下样式设置复选框： 但是没有应用样式。复选框仍显示其默认样式。如何给它指定的样式？ 问题答案： 更新： 以下答案引用了CSS 3广泛使用之前的状态。在现代浏览器（包括InternetExplorer9和更高版本）中，使用首选样式创建复选框替换更为简单，而无需使用JavaScript。 值得注意的是，基本问题没有改变。您仍然不能直接将样式（边框等）应用于复选框元素，并使这
-
问题内容： 我正在设置asp.net菜单的样式，并且试图了解StaticSelectedStyle-CssClass和StaticHoverStyle- CssClass参数的含义。 我的理解是，只要需要，使用这些参数定义的样式就会作为CSS类应用于相关元素。所以我创建菜单如下： 它适用于StaticMenuStyle-CssClass和StaticMenuStyle- CssClass（将这些类
-
我是JavaFx新手。我在FXML中创建了一个网格窗格。我想将该网格窗格设置为下图。我尝试了以下答案，并尝试了更多的CSS元素。但这些都没有帮助我做到这一点。 用于GridPane、VBox、VBox的JavaFX CSS类 使用CSS在GridPane中居中显示子项 向GridPane JavaFX添加边框 我是否也使用了错误的方法？我可以使用GridPane实现这一点，还是TableView很