SVG:Scala Vector Graphics
SVG in HTML:
SVG in sample(test.svg):
PS:推荐图形化SVG创建工具:[url]http://www.inkscape.org[/url]
SVG in HTML:
<!-- 1st way to import SVG script -->
<object type="image/svg+xml" data="test.svg" width="500" height="300">
</object>
<!-- 2nd way to import SVG script -->
<iframe src="test.svg" width="500" height="300"></iframe>
<!-- 3rd way to import SVG script -->
<embed src="test.svg" width=500" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
SVG in sample(test.svg):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Box around the image -->
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="black" stroke-width="5" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<!-- Visible path -->
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="green" stroke="blue" stroke-width="2" />
<!-- Group of elements to animate -->
<g stroke-width="5" stroke="black">
<!-- Stick figure pieces -->
<circle cx="0" cy="-45" r="10" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
<!-- Animation controls -->
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
begin="1s" dur="5s" repeatCount="indefinite"
rotate="auto" fill="freeze"/>
<animateColor attributeName="fill" attributeType="CSS" from="yellow" to="green" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-15" to="15" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" additive="sum" begin="1s" dur="5s" fill="remove"/>
</g>
</svg>
PS:推荐图形化SVG创建工具:[url]http://www.inkscape.org[/url]