title: Can you use CSS transitions on SVG attributes? Like y2 on a line?
body: <p>I want to change the attributes of an SVG line, and animate the transition to the new coordinates.</p>
  
  <p>I am using reactjs to change the value of y2 in this example:</p>
  
  <pre><code>&lt;line stroke='green' x1='0' y1='50%' x2='100%' y2='25%'&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;line stroke='green' x1='0' y1='50%' x2='100%' y2='75%'&gt;
  </code></pre>
  
  <p>with CSS like</p>
  
  <pre><code>.myStuff * {
      transition: all 1s;
  }
  </code></pre>
  
  <p><strong>Is it possible for a CSS transition to work on the y2 attribute?</strong> Or is there a way to set the attributes of the line in CSS like:</p>
  
  <pre><code>.myStuff line {
      y2: 25%;
  }
  </code></pre>
  
  <p><em>(which I know doesn't work)</em></p>
  
  <p>I have considered using javascript, but that adds complexity</p>
  
  <p>I have considered using SMIL, but I would have to store the old and new y2 states, and I don't think reactjs allows the animate element.</p>
  
  <p>I have considered using a transform on my line element, and will go down this path if I can't find a better solution. I want to avoid the math and complexity.</p>