我使用Inkscape创建svg图像,并且想知道如何使用未嵌入的CSS规则。
例如
到svg:rect对象
如何像这样添加css
最佳答案
这是HTML页面中的SVG的示例,您可以使用CSS设置样式:
HTML页面
<div id="mySvg">
<svg>
<use xlink:href="images/logo.svg#shape" />
</svg>
</div>
SVG(位于images/logo.svg)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
</svg>
CSS
svg {
fill: currentColor;
}
#mySvg {
color: green;
}
请参见工作示例:plunker
注释
fill
属性(fill
应该在CSS中)。使用Inkscape制作SVG时,通常会带有fill:none
或类似内容。您必须手动删除那些。