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

Tushar
  • 85,780
  • 21
  • 159
  • 179
Zhaowei
  • 293
  • 1
  • 3
  • 8

1 Answers1

0

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

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • 1
    The web animations API is supposed to work on CSS properties and DOM attributes. It's likely it has not been implemented for the attributes concerned in the UA the OP is using though. – Robert Longson Feb 10 '16 at 09:22