css - 使用 inkscape 将 css 添加到 svg

Question

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

例如

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

  class="rect1"

到 svg:rect 对象

如何添加css like

.rect1 { fill:#ffef00; }

Answer 1

这是您可以使用 CSS 设置样式的 HTML 页面中的 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>

CSS

svg {
    fill: currentColor;
}

#mySvg {
    color: green;
}

参见工作示例:plunker

注意事项

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