使用inkscape将css添加到svg答案

【问题标题】：Add css to svg with inkscape使用inkscape将css添加到svg
【发布时间】：2014-10-03 14:20:52
【问题描述】：

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

例如

绘制矩形
在 XML 编辑器中添加类属性为

class="rect1"

到 svg:rect 对象

如何添加css之类的

.rect1 { 填充：#ffef00； }

【问题讨论】：

标签： css svg inkscape

【解决方案1】：

以下是 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

备注

如果您使用 Inkscape 创建 SVG，您可能需要对 SVG 进行一些手工编辑，以使其可以使用 CSS 设置样式。
确保 SVG 代码中没有任何 fill 属性（fill 应该在 CSS 中）。使用 Inkscape 制作 SVG 时，它通常有一个 fill:none 或其他东西。您必须手动删除它们。
使用 Inkscape 时，将文件另存为“优化的 SVG”，如 here 所述。

【讨论】：