无法使用 CSS 格式化 SVG 元素答案

【问题标题】：Unable to Format SVG elements using CSS无法使用 CSS 格式化 SVG 元素
【发布时间】：2022-01-10 16:56:50
【问题描述】：

我正在尝试通过 CSS 向我的 SVG 元素添加动画，但我无法引用它们。我什至无法通过 CSS 更改颜色（“笔触”）。如果您可以显示正确的 CSS 来引用“路径”元素，那就太好了:)

#svgGroup #Path6 {
  stroke: black;
  stroke-dasharray: 20px;
  animation: line-anim 20s ease forwards;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1320.287" height="229.42" viewBox="0 0 1320.287 229.42">
  <defs>
    <style id="test">
      .cls-1 {
        stroke: #FFF;
        stroke-linecap: round;
        stroke-width: 10px;
      }
    </style>
  </defs>
  <g id="svgGroup" data-name="Group 2" transform="translate(-964.213 -1101.711)">
    <path id="Path_6" data-name="Path 6" class="cls-1" d="M0,0V104" transform="translate(1146.5 1219)"/>
    <path id="Path_7" data-name="Path 7" class="cls-1" d="M0,0V25" transform="translate(1160.5 1219)"/>
    <path id="Path_8" data-name="Path 8" class="cls-1" d="M32,0,0,13" transform="translate(1160.5 1219)"/>
  </g>
</svg>

【问题讨论】：

你翻译了 svg 画布外的路径

标签： css svg

【解决方案1】：

我的第一条评论是：不要迷惑自己...查看代码时，您会看到 viewBox 和所有转换/翻译语句都有很大的数字，包括正值和负值。所以，尽量让它更简单。我更改了 viewBox，以便您拥有 100x100 的“画布”。

CSS 无法正常工作的原因之一是拼写错误——ID 名为Path_6。但通常尽量避免使用 ID。坚持与你的 CSS 相关的类。再说一遍，尽量不要通过测试有白色笔划的东西来迷惑自己。

#svgGroup #Path_6 {
  stroke: black;
  stroke-dasharray: 20px;
  animation: line-anim 20s ease forwards;
}

<svg xmlns="http://www.w3.org/2000/svg" width="400" viewBox="0 0 100 100">
  <defs>
    <style id="test">
      .cls-1 {
        stroke: gray;
        stroke-linecap: round;
        stroke-width: 10px;
      }
    </style>
  </defs>
  <g id="svgGroup" data-name="Group 2">
    <path id="Path_6" data-name="Path 6" class="cls-1" d="M0,0V104" stroke-width="5" transform="translate(10 10)"/>
    <path id="Path_7" data-name="Path 7" class="cls-1" d="M0,0V25" transform="translate(20 10)"/>
    <path id="Path_8" data-name="Path 8" class="cls-1" d="M32,0,0,13" transform="translate(30 10)"/>
  </g>
</svg>

【讨论】：