CSS - 绘制SVG线动画

时间:2015-01-31 18:58:01

标签: css css3 svg

我有一个用SVG制作的简单钻石。我想创建一个动画,其中线条使用CSS3在3秒左右的时间内将它们从x1 / y1点绘制到x2 / y2点。

我以前做过的动画,但似乎无法弄清楚如何使用SVG。任何帮助都很赞赏!感谢。

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

0 个答案:

没有答案