ゼロベースのhtml学習終了

最初に svg がこの時点まで更新され、別の列が開かれて svg が更新されます。

平素より当コラムをご愛顧いただき、誠にありがとうございます。

1. SVG 描画テキスト

<text></text>

 属性:

x: テキスト位置の横座標

y: テキスト位置の垂直座標

font-size: テキストのサイズ

text-anchor: テキストの配置 (開始、中間、終了)

変換: 変換

transform="rotate(旋转角度 旋转中心点坐标)"

デフォルト座標 (0,0)

要素内では<text>、要素を含めることで、テキストとフォントのプロパティ、および現在のテキストの位置を<tspan>絶対座標または相対座標で調整できます。

リンクをテキストに追加

<svg xmlns="http://www.w3.org/2000/svg">
       <a xlink:href='' target=" ">
           <text>
               
           </text>
       </a>
    </svg>

2.パスを描く

<path />: アプリケーション パスは、任意の形状のグラフィックを描画できます。

d: パスを描画するためのコマンド

M (移動先): グラフィックを描画するための開始点の座標を定義します。

d="M150 0"

l (line to): 直線を描くために使用します。

d="M150 0 l75 200"
//起点（150,0） 结束（75,200）

コマンドの大文字は、絶対位置 (画面座標の原点に対する位置) を示します。

小文字は相対的な位置を示します (最後に描画された点を基準に)

<g></g> は、複数の描画要素をラップします。

三、svgの説明

<path stroke stroke-width stroke-linecap stroke-dasharray>

ストローク: ストローク アトリビュート

stroke-width: ストローク幅属性

stroke-linecap: ストローク ラインキャップ アトリビュート。

         値: スクエア スクエア キャップ ラウンド ラウンド キャップ バット ワイヤー キャップなし

stroke-dasharray: 破線のストローク属性。