我使用Inkscape创建svg图像,并且想知道如何使用未嵌入的CSS规则。

例如

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


  • 到svg:rect对象

    如何像这样添加css

    最佳答案

    这是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时,请按照here所述将文件另存为“Optimized SVG”。
  • 10-05 21:00
    查看更多