在 svg 中使用 css
我试图弄清楚如何制作 svgs 而不给每个元素赋予样式属性。
两个问题：
引用外部 css 文件时，样式在浏览器中正确显示，但在图像查看器中显示不正确。这是正常/可以避免的吗？
我的大多数元素都有 class 和 id 属性，并且以下 css 没有提供所需的效果，即，county 21015 没有覆盖其填充
.county
{
font-size:12px;
fill:#d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
path#21015
{
fill:red;
}
I'm trying to figure out how to make svgs without giving every element a style attribute.
Two problems:
When referencing an external css file, the style appears correctly in a browser, but not in an image viewer. Is this normal/avoidable?
Most of my elements have class and id attributes, and the following css doesnt provide the desired effect, i.e., county 21015 doesnt have its fill overridden
.county
{
font-size:12px;
fill:#d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
path#21015
{
fill:red;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果填充不是您想要的，那么可能有一些具有更高特异性的东西覆盖了您想要的样式规则，例如该元素上的内联样式属性，或影响该元素的其他一些规则。您也可以通过写“fill: red !important”来承认失败——这在大多数情况下都有效。
无论如何，这更像是一个 css 问题而不是 svg 问题。
If the fill isn't the one you want then there probably is something with higher specificity overriding the stylerule you want, such as an inline style attribute on that element, or some other rule affecting that element. You can also admit defeat by writing "fill: red !important" - that will work in the majority of cases.
Anyway, this is more of a css question than an svg question.
这是一种替代语法...
在定义标签内..
.fil0 {fill:#96989A}
在路径标签内 class="fil0"
从路径到定义的直接类引用将覆盖我的经验中的所有其他引用。
This is an alternative syntax...
Within the definition tags..
.fil0 {fill:#96989A}
Within the path tag(s) class="fil0"
Direct class references from the path to the definitions will override all others in my experience.