Web animations API with svg element <line>

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%'}
          ]

this frames doesn't work. But changed the stroke or strokeWidth it run correctly, what's wrong with this?

Answer 1

Not all attributes can be manipulated with CSS. Only those designated as "properties" can be changed with CSS and animated.

The SVG attributes that are properties are listed here:

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