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

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 ピクセルになります。

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

marker-end="url(#arrow)”

ライン、パス、ポリライン、ポリゴンなどの基本的なグラフィックスにマーカーを適用するには、次の 4 つの方法があります:

• marker-start=”url(#marker-id )”

• マーカー-mid=”url(#マーカー-id)”

• マーカー-end=”url(#マーカー-id)”

• マーカー=”url(#マーカー-id) 『

おすすめ関連記事：

svgで座標系変換を実装する方法（コード付き）

reactでsvgを使う様々な方法まとめ（コード付き）

以上がSVG での 要素の使用とマーカー属性の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。