通过CSS更改svg的笔触颜色

Question

我的页面上有嵌入svg文件的图形。

<object id="inspektion-svg" data="images/SVG/Inspektion.svg" type="image/svg+xml">
   <!---Fallback--->
   <!-- Your Browser cannot show svg. -->
</object>

SVG文件如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="96.885" height="74.674" viewBox="0 0 96.885 74.674">
  <defs>
    <style>
      .cls-1, .cls-2 {
        fill: none;
        stroke: #c2d9ef;
        stroke-width: 4px;
      }

      .cls-1 {
        stroke-miterlimit: 10;
      }

      .cls-2 {
        stroke-linejoin: round;
      }
    </style>
  </defs>
  <g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-367 -53)">
    <path id="Pfad_76" data-name="Pfad 76" class="cls-1" d="M455.808,65v50.481H371V65" transform="translate(2.038 10.192)"/>
    <path id="Pfad_77" data-name="Pfad 77" class="cls-1" d="M400,63.077V55h18.173v8.077" transform="translate(31.597)"/>
    <path id="Pfad_78" data-name="Pfad 78" class="cls-1" d="M376,63.077V55h18.173v8.077" transform="translate(7.135)"/>
    <path id="Pfad_79" data-name="Pfad 79" class="cls-1" d="M381.115,71.115H369V59h92.885V71.115H449.77" transform="translate(0 4.077)"/>
    <path id="Pfad_80" data-name="Pfad 80" class="cls-2" d="M401.472,82.246,405.494,62.8,383.333,91.876l13.5-1.676-4.022,19.442L414.969,80.57Z" transform="translate(14.608 7.954)"/>
  </g>
</svg>

现在，我想随后通过CSS更改笔触颜色。

如果我创建一个CSS类，例如：

.darkstroke {
  stroke: #7ca7d7;
}

并将其分配给对象，没有任何变化。 另外，当我修改svg并删除所有<style>属性时也无济于事。

有可能这样做吗？

提前致谢。

问候拉斯

Answer 1

.darkstroke不是svg的元素。 要与SVG交互，您需要将笔触应用于SVG内部的某个内容（通常是<path> ）。

所以像这样：

#Pfad_76 {
  stroke: blue;
}

但是，使用外部样式和使用<object>嵌入的svg存在一些问题。 基本上，你需要定义SVG 里面的样式。 如果要使用外部样式表，则需要在svg文件中使用此样式表（更改路径）。

<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg>...</svg>

也就是说，通常最好的选择是，以后需要修改SVG时，只需将SVG代码放入HTML中，而无需使用embed对象。

Answer 2

您需要在CSS中具有更高的限定符，才能覆盖SVG中的内联CSS。 因此，只需添加一个额外的限定词，css文件中的css现在就比svg中的那个更重要。

 svg .cls-1{ stroke: red; } 

 <svg xmlns="http://www.w3.org/2000/svg" width="96.885" height="74.674" viewBox="0 0 96.885 74.674"> <defs> <style> .cls-1, .cls-2 { fill: none; stroke: #c2d9ef; stroke-width: 4px; } .cls-1 { stroke-miterlimit: 10; } .cls-2 { stroke-linejoin: round; } </style> </defs> <g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-367 -53)"> <path id="Pfad_76" data-name="Pfad 76" class="cls-1" d="M455.808,65v50.481H371V65" transform="translate(2.038 10.192)"/> <path id="Pfad_77" data-name="Pfad 77" class="cls-1" d="M400,63.077V55h18.173v8.077" transform="translate(31.597)"/> <path id="Pfad_78" data-name="Pfad 78" class="cls-1" d="M376,63.077V55h18.173v8.077" transform="translate(7.135)"/> <path id="Pfad_79" data-name="Pfad 79" class="cls-1" d="M381.115,71.115H369V59h92.885V71.115H449.77" transform="translate(0 4.077)"/> <path id="Pfad_80" data-name="Pfad 80" class="cls-2" d="M401.472,82.246,405.494,62.8,383.333,91.876l13.5-1.676-4.022,19.442L414.969,80.57Z" transform="translate(14.608 7.954)"/> </g> </svg>