0

I have a simple diamond made in an SVG. I'd like to create an animation where the lines draw themselves from their x1/y1 points to the x2/y2 points over the period of 3 seconds or so using CSS3.

Animations I've done before, but can't seem to figure out how to do it with an SVG. Any help is apprecieated! Thanks.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ellipse_2_xA0_Image_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" viewBox="82 165.3 443.1 461.3" enable-background="new 82 165.3 443.1 461.3" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="133.5" y1="396.9" x2="306.6" y2="223.8"/>
<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="478.5" y1="396.9" x2="305.4" y2="223.8"/>
<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="478.5" y1="395.7" x2="305.4" y2="568.8"/>
<line fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="306.6" y1="568.8" x2="133.5" y2="395.7"/>
</svg>
Dustin
  • 6,207
  • 19
  • 61
  • 93
  • Could be done with a single `path` element ----> [Fiddle](http://jsfiddle.net/s8xfavav/1/) – Weafs.py Jan 31 '15 at 19:19
  • possible duplicate of [How can I animate a progressive drawing of svg path?](http://stackoverflow.com/questions/14275249/how-can-i-animate-a-progressive-drawing-of-svg-path) – Paulie_D Jan 31 '15 at 19:31

0 Answers0