在 svg 代码中声明的样式标签会影响其他 svg 代码答案

【问题标题】：Style tag declared in svg code affects other svg code在 svg 代码中声明的样式标签会影响其他 svg 代码
【发布时间】：2021-08-31 11:25:12
【问题描述】：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.17 130.62">
  <defs>
    <style>
      .cls-1 {
        fill: #231f20;
      }
    </style>
  </defs>
  <g id="레이어_2" data-name="레이어 2">
    <g id="Layer_1" data-name="Layer 1">
      <path class="cls-1" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path>
    </g>
  </g>
</svg>

有这个svg代码，这个svg代码有style标签

在此样式标签中编写的代码会影响其他 svg 代码。

不可能简单地将“cls-1”这样的类名更改为“cls-2”。因为 svg 超过一千，我需要另一个解决方案。有人解决了这个问题吗？

【问题讨论】：

如果您使用的是内联 svg（在 HTML 文档中），样式会泄漏出来，并可能影响其他 svg 元素甚至 HTML 文档。作为一种解决方案，您可以将组的 id 与类结合起来：#Layer_1 .cls-1
相关：stackoverflow.com/questions/14656893/…

标签： javascript html css svg

【解决方案1】：

您的 svg id 是独一无二的，因此您可以尝试为它们附加样式：

<svg xmlns="http://www.w3.org/2000/svg" width="50px" viewBox="0 0 119.17 130.62"><defs><style>#레이어_2{fill:yellow;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path></g></g></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50px" viewBox="0 0 119.17 130.62"><defs></defs><g id="레이어_3" data-name="레이어 3"><g id="Layer_1" data-name="Layer 1"><path class="cls-2" d="M115.91,3.25A3.89,3.89,0,0,0,111.6,0c-4.26.39-5.44.4-7.5,2.94a3.84,3.84,0,0,0-3.9,1.4,51.32,51.32,0,0,0-5.8,10,3.65,3.65,0,0,0-3.33,2.34A338.79,338.79,0,0,0,78.56,57.54c-1.41,4.9-2.79,9.8-4,14.73-3.6,9.47-6.32,19-6.55,29.41C62.26,95.14,55.6,89.29,49.43,83.31,44.1,78.13,38.32,72.24,32.16,66.8c-6-7.71-13.57-13.63-24.48-15.65a4.27,4.27,0,0,0-.8,0c-.1,0-.18,0-.29,0H3.76c-4,0-4.85,5.19-2.37,7.5,22.23,20.73,35.9,48.83,59.6,68.11,3.11,2.53,6.83-.26,7-3.31.06.33.11.66.18,1s-.08.78-.1,1.17c-.17,3.92,4.54,7.07,7.46,3.46,13.16-16.29,11.22-38.72,17.64-57.73,3-8.92,6.5-18,9.34-27.27,3.89-9.68,8-19.28,12.68-28.54a4.27,4.27,0,0,0,.69-.95c.94-1.89,1.89-3.79,2.84-5.68C120.09,6.06,118.24,3.84,115.91,3.25ZM30.24,77.56q2.29,3.42,4.38,7.16Q30.9,79.83,27.13,75C28.16,75.83,29.19,76.68,30.24,77.56ZM66.46,120.2c-8.56-7-14.19-17.4-19.59-28,8.75,8.13,16.4,16,20.15,21.61a52.41,52.41,0,0,0,.62,7.91A4.27,4.27,0,0,0,66.46,120.2Z"></path></g></g></svg>

【讨论】：