使用inkscape将css添加到svg

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

比如说

• 画矩形
• 在XML编辑器中，将类属性添加为
  class=“rect1”

到svg:rect对象

如何添加css类

.rect1{ 填充：#ffef00； }

---

下面是一个HTML页面中的SVG示例，您可以使用CSS设置其样式：

HTML页面

<div id="mySvg">
  <svg>
    <use xlink:href="images/logo.svg#shape" />
  </svg>
</div>

见工作示例：

注释

• 如果您使用Inkscape创建SVG，您可能需要手工编辑SVG，使其可以使用CSS进行样式化
• 确保SVG代码中没有任何

  fill

  属性（

  fill

  应该在CSS中）。在使用Inkscape制作SVG时，它通常有一个

  填充：none

  或其他内容。您必须手动删除这些
• 使用Inkscape时，将文件另存为“优化的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>

svg {
    fill: currentColor;
}

#mySvg {
    color: green;
}