SVG での <marker> 要素の使用とマーカー属性の導入-H5 チュートリアル-php.cn

SVG での要素の使用とマーカー属性の導入

不言

リリース： 2018-08-02 15:02:09

オリジナル

6201 人が閲覧しました

SVG を使用して描画されたグラフィックは矢印であり、とで定義して再利用できますが、適用するたびに移動または回転する必要があります。要素を直接使用する方がはるかに便利です。

要素

marker は、1 つ以上のパス、ライン、ポリライン、またはポリゴンの頂点を接続できるマーカータイプです。最も一般的な使用例は、出力結果の線上に矢印を描画するか、(ポリマーカー) グラフィックをマークすることです。
要素を使用して、マーカーとその関連属性を作成します。通常、マーカーを要素に配置し、他の場所で参照します。簡単な例を通して学びましょう。

<svg width="600px" height="100px"> 
    <defs> 
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> 
    </marker>
    </defs> 
    <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>

ログイン後にコピー

マーカープロパティ

markerWidth プロパティと markerHeight プロパティは、マーカーウィンドウの幅と高さを定義します。

上記の例では、markerWidth と markerHeight の両方を 10px に設定しています。パスに描かれた三角形は 9px x 6px の領域に収まる必要があるため、マーカー幅を 9 に、マーカー高さを 6 に設定することもできます。これはマーカーが受け入れることができる最小サイズです。これより小さいサイズではグラフィックが切り取られます。
次の 2 つの属性 refX と refY は、グラフィック要素とマーカー間の接続の位置座標を参照します。また、その後ろのシーンに変換を適用して、マーカーを移動し、マーカーと位置を合わせます。

次の属性は方向です。この属性により、線の方向を変換するときにマーカーを調整する必要がなくなります。他のコンテンツに接続されているときにマーカーを回転するかどうかを決定する auto 値または角度値を受け入れます。

auto この値は、マーカーが適用された要素と一緒に回転することを意味します。値 45 度は、マーカーの方向が常に 45 度のままで、接続された要素とともに回転しないことを意味します。ほとんどの場合、この値は auto に設定されます。

最後の属性は markerUNits で、マーカーが拡大縮小されるかどうかを決定するために使用されます。これは、マーカーのコンテンツ自体の座標系だけでなく、マーカーの幅とマーカーの高さを定義します。

2 つの値、strokingWidth と userSpaceOnUse を受け入れます。デフォルト値はストローク幅です。これにより、接続されているラインに合わせてマーカーを拡大縮小できるため、ほとんどの場合これを設定します。

ストローク幅: 座標系のマーカー値と現在のストローク幅の単位は同じサイズです。つまり、ストローク幅の値によってマーカーを拡大縮小できるようになります。
userSpaceOnUse: マーカーの値は、現在のユーザー座標系の値です。つまり、マーカーが半径 10 ピクセルの円の場合、接続されている要素に関係なく、常に半径 10 ピクセルになります。

マーカー機能 - 要素内のマーカーを参照