HTML5-SVG-路径（包括曲线） 文字 

 1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
 2   <path d="M100 0 L25 100 L175 100 Z" />
 3   <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="2" fill="none" />
 4   <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="2" fill="none" />
 5   <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
 6   <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
 7   <path d="M 100 350 q 100 -500 200 0" stroke="blue" stroke-width="5" fill="none" />
 8   <!-- Mark relevant points -->
 9   <g stroke="black" stroke-width="3" fill="black">
10     <circle id="pointA" cx="100" cy="350" r="3" />
11     <circle id="pointB" cx="250" cy="50" r="3" />
12     <circle id="pointC" cx="400" cy="350" r="3" />
13   </g>
14   <!-- Label the points -->
15   <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
16     <text x="100" y="350" dx="-30">A</text>
17     <text x="250" y="50" dy="-10">B</text>
18     <text x="400" y="350" dx="30">C</text>
19   </g>
20 </svg

 

 

    • M = moveto
    • L = lineto
    • H = horizontal lineto
    • V = vertical lineto
    • C = curveto
    • S = smooth curveto
    • Q = quadratic Bézier curve
    • T = smooth quadratic Bézier curveto
    • A = elliptical Arc
    • Z = closepath
posted @ 2016-06-16 10:41  skyhap  阅读(1778)  评论(0)    收藏  举报