svg表盘实例

 

<? xml version="1.0" encoding="ISO-8859-1" ?>
<!--  Generator: Adobe Illustrator 9.0, SVG Export Plug-In  -->
<! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
< 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 >