SVG 教程

SVG 要素

SVG <polyline> 曲折線を描画 SVG <ellipse> 椭円を描画

SVG <line> 直線を描画

SVG <line>要素はSVGの基本形状の一つで、二つの点を結ぶ線を作成するために使用されます。<line>要素はSVG画像内で線を描画するために使用されます。水平線、垂直線、斜線など、様々な線を描画できます。

SVG line 在线示例

以下是一些简单的常用SVG <line>画直线的示例:

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<line　x1="0"　　y1="10"　x2="0"　　　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="10"　y1="10"　x2="100"　y2="100"　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="20"　y1="10"　x2="100"　y2="50"　　style="stroke:#006600;"></line>
　　　　　　　　<line　x1="30"　y1="10"　x2="110"　y2="10"　　style="stroke:#006600;"></line>
</svg>

テストを見てみる ‹/›

以上のコードを実行すると、以下のように直線効果が表示されます:

直線の始点はx1とy1属性が設定されたポイントです。
直線の終点はx2とy2属性が設定されたポイントです。
このstyle属性は線（線）の色と太さを設定します。

SVG <polyline> 曲折線を描画 SVG <ellipse> 椭円を描画