<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?
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: