使用inkscape将css添加到svg

Question

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

例如

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

  类= "Rect1的"

到svg:rect对象

如何添加css之类的

.rect1 {fill:#fffef00; }

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>

CSS

svg {
    fill: currentColor;
}

#mySvg {
    color: green;
}

见工作示例:plunker

笔记

• 如果您使用Inkscape创建SVG,您可能需要对SVG进行一些手动编辑,以使其可以使用CSS进行样式化.
• 确保SVG代码中没有任何fill属性(fill应该在CSS中).使用Inkscape制作SVG时,它通常有一个fill:none或者什么.你必须手动删除它们.
• 当使用Inkscape中,文件保存为"优化SVG"所描述这里.