通过 CSS 更改 svg 的描边颜色

Posted 2023-03-28

【中文标题】通过 CSS 更改 svg 的描边颜色

【英文标题】：Changing stroke color of svg via CSS

【发布时间】：2020-01-01 00:24:18

【问题描述】：

我的页面上有嵌入 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"   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> 属性时也无济于事。

有没有可能这样做？

提前致谢。

问候 拉尔斯

【参考方案1】：

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

所以是这样的：

#Pfad_76 
  stroke: blue;

但是，使用外部样式和使用 <object> 嵌入的 svg 存在几个问题。基本上，您需要在 inside svg 中定义您的样式。如果您想使用外部样式表，则需要在 svg 文件中包含此（更改路径）。

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

也就是说，如果您以后需要修改 SVG，通常最好的选择是将 SVG 代码简单地放入 html 中，而不使用嵌入对象。

【参考方案2】：

您需要在 css 中有更高的限定符才能覆盖 svg 中的内联 css。因此，只需添加一个额外的限定符，css 文件中的 css 现在就超过了 svg 中的。

svg .cls-1
   stroke: red;

<svg xmlns="http://www.w3.org/2000/svg"   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>