使用Inkscape为SVG添加CSS

Question

我使用Inkscape创建SVG图像，想知道如何使用非嵌入式CSS规则。

例如：

- 画一个矩形 - 在XML编辑器中，将class属性添加为"class =“rect1””到svg:rect对象

如何添加类似以下的CSS样式：

.rect1 { fill:#ffef00; }

- tehkonst

Answer 1

以下是一个在HTML页面中使用CSS样式的SVG示例：

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>

The CSS

svg {
    fill: currentColor;
}

#mySvg {
    color: green;
}

查看工作示例：plunker

注意事项

• 如果您使用Inkscape创建SVG，则可能需要手动编辑SVG以使其可通过CSS进行样式设置。
• 确保SVG代码中没有任何fill属性（应该在CSS中使用fill）。在使用Inkscape制作SVG时，它通常具有fill:none之类的属性。您将不得不手动删除这些内容。
• 使用Inkscape时，请按照此处所述将文件保存为“优化的SVG”。

- Chris Clark