svg単純図形描画
14094 ワード
Web開発ではsvgを使用してグラフィックを描くことが多く、svgは非常に強力なグラフィック構築能力を持っています.
SVGにはいくつかの事前定義された形状要素があり、開発者が使用し、操作することができる:矩形円形楕円線折線多角形経路
(1)ラベルは、矩形を作成したり、矩形の変種を作成したりするために使用することができる.
(2)ラベルは、円を作成するために使用できます.
上記のコードは、半径40の円、エッジの幅2、円内に赤を塗りつぶす座標を(100,50)で描画することを実現しています.
(3)ラベルは楕円を作成するために使用できます.楕円は円とよく似ています.楕円はxとyの半径が異なり、円のxとyの半径は同じです.
上記のコードは、(300150)における座標の描画を実現し、横半径200、縦半径80の楕円を実現する.
(4)ラベルは線を作成するために使用されます.
上記のコードは、初期点(0,0)、終点(300,300)の直線を描画することを実現する.
(5)ラベルは、直線のみを含む形状を作成するために使用されます.
上記のコードは、折れ線セグメントの描画を実現します.
(6)ラベルは、3つ以上のエッジを含むグラフィックを作成するために使用されます.
上記のコードは三角形の描画を実現します.
(7)次のコマンドはパスデータに使用できます:M=moveto L=lineto H=horizontal lineto V=vertical lineto C=curveto S=smooth curveto Q=quadratic Belzier curve T=smooth quadratic Belzier curveto A=elliptical Arc Z=closepath
上記の例は、位置250、150、350に到達し、そこから350、最後に250、150で経路を閉じる経路を定義している.
上はsvgの基本的な図形の描画に対するいくつかの総括で、svgは私たちが深く勉強して研究する必要がある多くの知識があります.
SVGにはいくつかの事前定義された形状要素があり、開発者が使用し、操作することができる:矩形円形楕円線折線多角形経路
(1)ラベルは、矩形を作成したり、矩形の変種を作成したりするために使用することができる.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/> (2)ラベルは、円を作成するために使用できます.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
上記のコードは、半径40の円、エッジの幅2、円内に赤を塗りつぶす座標を(100,50)で描画することを実現しています.
(3)ラベルは楕円を作成するために使用できます.楕円は円とよく似ています.楕円はxとyの半径が異なり、円のxとyの半径は同じです.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
上記のコードは、(300150)における座標の描画を実現し、横半径200、縦半径80の楕円を実現する.
(4)ラベルは線を作成するために使用されます.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
上記のコードは、初期点(0,0)、終点(300,300)の直線を描画することを実現する.
(5)ラベルは、直線のみを含む形状を作成するために使用されます.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
上記のコードは、折れ線セグメントの描画を実現します.
(6)ラベルは、3つ以上のエッジを含むグラフィックを作成するために使用されます.
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
上記のコードは三角形の描画を実現します.
(7)次のコマンドはパスデータに使用できます:M=moveto L=lineto H=horizontal lineto V=vertical lineto C=curveto S=smooth curveto Q=quadratic Belzier curve T=smooth quadratic Belzier curveto A=elliptical Arc Z=closepath
/span>svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
d="M250 150 L150 350 L350 350 Z" />
上記の例は、位置250、150、350に到達し、そこから350、最後に250、150で経路を閉じる経路を定義している.
上はsvgの基本的な図形の描画に対するいくつかの総括で、svgは私たちが深く勉強して研究する必要がある多くの知識があります.