svg 表盘实例

来源:互联网 发布:java自我介绍模板 编辑:程序博客网 时间:2024/03/28 17:36
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<circle cx="200" cy="200" r="130" style="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"/>
<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 id='kedu'>
<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>
</g>
<g  transform="translate(200,200),rotate(-240)">
 <path d="M0,-5 L90,0 L0,5 z" style="fill:red;stroke:black;stroke-width:1;">
 <animateTransform attributeName='transform' type='rotate' from='0' to='150' dur='5s' fill="freeze" />
 </path>
</g>
<circle cx="200" cy="200" r="3" style="fill:red;stroke:black;stroke-width:7"/>
</svg>
 
原创粉丝点击