Question

有人可以告诉我为什么这段代码：

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">

    <defs id="defs">
            <animate xlink:href="#poly_t1" attributeName="points" attributeType="XML" from="100,500 150,500 170,480 120,480" to="100,400 150,400 170,380 120,380" begin="0s" dur="3s" fill="freeze" ></animate>
            <animate xlink:href="#poly_t2" attributeName="points" attributeType="XML" from="100,500 150,500 150,500 100,500" to="100,500 150,500 150,400 100,400" begin="0s" dur="3s" fill="freeze" ></animate>
            <animate xlink:href="#poly_t3" attributeName="points" attributeType="XML" from="150,500 170,480 170,480 150,500" to="150,500 170,480 170,380 150,400" begin="0s" dur="3s" fill="freeze" ></animate>

    </defs>
    <g id="histo">
            <polygon id="poly_t1" points="100,500 150,500 170,480 120,480" fill="#cc0022" stroke="black"></polygon>
            <polygon id="poly_t2" points="100,500 150,500 150,500 100,500" fill="#cc0022" stroke="black" ></polygon>
            <polygon id="poly_t3" points="150,500 170,480 170,480 150,500" fill="#cc0022" stroke="black"></polygon>
    </g>

</svg>
</body>
</html>

http://jsfiddle.net/j2spu/2/

适用于FF，Chrome 18到19，Safari，rekonq以及更多我认为但不适用于Chrome 20到24？

Chrome SVG动画标签

0 个答案: