带有 svg 元素<line>的网页动画 API

Question

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="position: absolute;left:0;top:0;transition:all 450ms cubic-bezier(.29,.48,.29,.3)" _v-e8b2cbd2="" _v-71032799="">
  <ellipse cx="50%" cy="50%" _v-e8b2cbd2="" stroke-width="0%" rx="50%" stroke="" ry="50%" fill="#3D92EA"></ellipse>
  <ellipse _v-e8b2cbd2="" stroke="white" stroke-width="2%" cx="25%" cy="30%" rx="3%" ry="3%" fill="white"></ellipse>
  <ellipse _v-e8b2cbd2="" fill="white" stroke="white" stroke-width="2%" cx="25%" cy="50%" rx="3%" ry="3%"></ellipse>
  <ellipse _v-e8b2cbd2="" cx="25%" fill="white" stroke="white" stroke-width="2%" cy="70%" rx="3%" ry="3%"></ellipse>
  <line id="line" fill="none" _v-e8b2cbd2="" y2="30%" x2="78%" y1="30%" x1="38%" stroke-width="5%" stroke="white"></line>
  <line fill="none" _v-e8b2cbd2="" y2="50%" x2="78%" y1="50%" x1="38%" stroke-width="5%" stroke="white"></line>
  <line fill="none" _v-e8b2cbd2="" y2="70%" x2="78%" y1="70%" x1="38%" stroke-width="5%" stroke="white"></line>
</svg>
let L2Frames = [
            {x1: '0%', y1: '0%', x2: '0%', y2: '0%'},
            {x1: '30%', y1: '30%', x2: '80%', y2: '80%'}
          ]

此帧不起作用。但是更改了笔画或笔画宽度它运行正确，这有什么问题？

Answer 1

并非所有属性都可以使用 CSS 进行操作。 只有那些被指定为"属性"的才能用CSS更改和动画。

此处列出了作为属性的 SVG 属性：

https://www.w3.org/TR/SVG/propidx.html