svg_paths

月夜原野發表於2017-10-16

path標籤介紹:

path:畫路徑標籤
d:path組成的座標點
    = moveto 移動到某一點(開始點)
    = lineto 畫線到某一點
    = horizontal lineto 水平 畫線到某一點
    = vertical lineto 垂直 畫線到某一點
    C = curveto 曲線點
    S = smooth curveto 平滑的曲線點
    = quadratic Bezier curve 二次貝塞爾曲線
    T = smooth quadratic Bezier curveto 平滑二次貝塞爾曲線
    A = elliptical Arc 橢圓 弧形
    Z = closepath 關閉路徑

fill:填充顏色
stroke:邊框顏色
stroke-width:邊框寬頻
fill-opacity:透明度
stroke-opacity:邊框的透明度

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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 200 L350 450" style="fill:white;stroke:red;stroke-width:2" />

</svg>