SVG表盘实例

不知道什么原因，图片无法上传。只能先看代码了：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="metallic">
<feGaussianBlur result="blurredAlpha" in="SourceAlpha" stdDeviation="3"/>
<feOffset result="offsetBlurredAlpha" in="blurredAlpha" dx="2" dy="1"/>
<feDiffuseLighting result="bumpMapDiffuse" in="blurredAlpha" surfaceScale="5" diffuseConstant="0.5" style="lighting-color:rgb(255,255,255)">
<feDistantLight azimuth="135" elevation="60"/>
</feDiffuseLighting>
<feComposite result="litPaint" in="bumpMapDiffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" in2="SourceGraphic"/>
<feSpecularLighting result="bumpMapSpecular" in="blurredAlpha" surfaceScale="5" specularConstant="0.5" specularExponent="10" style="lighting-color:rgb(255,255,255)">
<feDistantLight azimuth="135" elevation="60"/>
</feSpecularLighting>
<feComposite result="litPaint" in="litPaint" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in2="bumpMapSpecular"/>
<feComposite result="litPaint" in="litPaint" operator="in" in2="SourceAlpha"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>

<circle cx="200" cy="200" r="130" style="filter:url(#metallic);fill:white;stroke:rgb(11,11,13);stroke-width:10;"/>
<path d="M150,286 A100,100 0 1,1 250,286" style="fill:none;stroke:black;stroke-width:3;"/>

<g>
<line  x1="200" y1="100" x2="200" y2="115" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="100" y1="200" x2="115" y2="200" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="285" y1="200" x2="300" y2="200" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="242.5" y1="126.4" x2="250" y2="113.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="286.6" y1="150" x2="273.6" y2="157.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="157.5" y1="126.4" x2="150" y2="113.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="113.4" y1="150" x2="126.4" y2="157.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="242.5" y1="273.6" x2="250" y2="286.6" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="286.6" y1="250" x2="273.6" y2="242.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="157.5" y1="273.6" x2="150" y2="286.6" style="fill:none;stroke:black;stroke-width:1.5"/>
<line  x1="113.4" y1="250" x2="126.4" y2="242.5" style="fill:none;stroke:black;stroke-width:1.5"/>
<text  x="160" y="277" style="font-family:Times;font-size:20"> -20 </text>
<text  x="120" y="205" style="font-family:Times;font-size:20"> 0 </text>
<text  x="160" y="145" style="font-family:Times;font-size:20"> 20 </text>
<text  x="215" y="145" style="font-family:Times;font-size:20"> 40</text>
<text  x="265" y="205" style="font-family:Times;font-size:20"> 60 </text>
<text  x="230" y="277" style="font-family:Times;font-size:20"> 80 </text>
<text id="xianshi" style="font-family:Times;font-size:20"  x="160" y="370"> </text>
<line  x1="299.45" y1="189.55" x2="289.55" y2="190.55" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="297.8" y1="179" x2="288" y2="181" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="295" y1="169" x2="285.6" y2="172" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="291.4" y1="159" x2="282.2" y2="163.4" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="280.9" y1="141" x2="272.8" y2="147" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="274.3" y1="133" x2="266.8" y2="139.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="266.9" y1="125.7" x2="260.2" y2="133" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="258.8" y1="119" x2="252.9" y2="127.2" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="240.7" y1="108.6" x2="236.6" y2="117.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="230.9" y1="104.9" x2="227.8" y2="114.4" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="220.8" y1="102.2" x2="218.7" y2="112" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="210.5" y1="100.6" x2="209.4" y2="110.5" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="189.5" y1="100.5" x2="190.6" y2="110.5" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="179.2" y1="102.2" x2="181.3" y2="112" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="169.1" y1="104.9" x2="172.2" y2="114.4" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="159.3" y1="108.7" x2="163.4" y2="117.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="141.2" y1="119.1" x2="147.1" y2="127.2" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="133.1" y1="125.7" x2="139.8" y2="133.1" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="125.7" y1="133.1" x2="133.1" y2="139.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="119.1" y1="141.2" x2="127.2" y2="147.1" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="108.6" y1="159.3" x2="117.8" y2="163.4" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="104.9" y1="169.1" x2="114.4" y2="172.2" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="102.2" y1="179" x2="112" y2="181.3" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="100.5" y1="189.5" x2="110.5" y2="190.6" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="100.5" y1="210.5" x2="110.5" y2="209.5" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="102.2" y1="220.8" x2="112" y2="218.7" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="104.9" y1="230.9" x2="114.4" y2="227.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="108.6" y1="240.7" x2="117.8" y2="236.6" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="119.1" y1="258.8" x2="127.2" y2="252.9" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="125.7" y1="266.9" x2="133.1" y2="260.2" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="133.1" y1="274.3" x2="139.8" y2="266.9" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="141.2" y1="280.9" x2="147.1" y2="272.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="299.45" y1="210.5" x2="289.55" y2="209.5" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="297.8" y1="220.8" x2="288" y2="218.7" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="295" y1="230.9" x2="285.6" y2="227.8" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="291.4" y1="240.7" x2="282.2" y2="236.6" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="280.9" y1="258.8" x2="272.8" y2="252.9" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="274.3" y1="266.9" x2="266.8" y2="260.2" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="266.9" y1="274.3" x2="260.2" y2="266.9" style="fill:none;stroke:black;stroke-width:1"/>
<line  x1="258.8" y1="280.9" x2="252.9" y2="272.8" style="fill:none;stroke:black;stroke-width:1"/>
</g>

<g transform="translate(200,200)">
<g id="wendu">
<line x1="0" y1="0" x2="-50" y2="86" style="stroke-width:5;stroke:red">
<animateTransform attributeName="transform"  type="rotate"   dur="30s" />
</line>
</g>
</g>
<circle cx="200" cy="200" r="3" style="fill:red;stroke:black;stroke-width:7"/>
</svg>