◎Svgタグの記述について（その１）
四角形（rectタグ）／円（circleタグ）／楕円（ellipseタグ）／直線（lineタグ）／折れ線（polylineタグ）／多角形（polygonタグ）の記述について、まとめて見ました。内容は下記の通りとなります。
１、共通の属性について
a.「fill」は、線で囲まれた領域を表している。値は色コードを定義する。
b.「stroke」は、線の色を表している。値は色コードを定義する。
c.「stroke-width」は、線の幅を表している。値は数値を定義する。
d.「stroke-linecap」は、線の端の形状を表している。値は「butt:バット線端」「round：丸型線端」「square：突出線端」を定義する。
e.「stroke-dasharray」は、破線を表す。値は数値を定義し、その数値は破線の長さを表す。
f.「fill-rule」は、多角の線で囲まれた部分を塗る・塗らない（白抜き）を指定する。使用できるのは、path・polyline・polygonタグで使用できる。
値は「nonzero：全面に塗る」「evenodd：線によって囲まれた領域が何本の線分に囲まれているかによって塗る・塗らない（白抜き）が切り替わる」を定義する。
２、四角形（rectタグ）の属性について
例：<rect height=”100″ width=”100″ x=”0″ y=”0″ fill=”red” />
a.「x」は、Ｘ座標の位置を定義している。例では、一番左を指定している。
b.「y」は、Ｙ座標の位置を定義している。例では、一番上を指定している。
c.「width」は、四角の幅を定義している。例では、幅100pxを意味する。
d.「height」は、四角の高さを定義している。例では、高さ100pxを意味する。
３、円（circleタグ）の属性について
例：<circle cx=”150″ cy=”150″ r=”50″ fill=”blue” />
a.「cx」は、中心点のX座標を定義している。例では、左から150pxを指定している。
b.「cy」は、中心点のY座標を定義している。例では、上から150pxを指定している。
c.「r」は、中心点からの半径を定義している。例では、半径50pxを指定している。
４、楕円（ellipse）の属性について
例：<ellipse cx=”250″ cy=”250″ rx=”50″ ry=”25″ fill=”yellow” />
a.「cx」中心点のX座標を定義している。例では、左から250pxを指定している。
b.「cy」中心点のY座標を定義している。例では、上から250pxを指定している。
c.「rx」は、中心点からの左右の半径を定義している。例では、中心点から左右50pxの位置に円の端がある。
d.「ry」は、中心点からの上下の半径を定義している。例では、中心点から上下25pxの位置に円の端がある。
５、直線（lineタグ）の属性について
例：<line x1=”300″ y1=”300″ x2=”400″ y2=”400″ stroke=”red” stroke-width=”2″ />
a.「x1」は、線の開始のX座標を定義している。例では左から300pxを指定している。
b.「y1」は、線の開始のY座標を定義している。例では上から300pxを指定している。
c.「x2」は、線の終了のX座標を定義している。例では左から400pxを指定している。
d.「y2」は、線の終了のY座標を定義している。例では上から400pxを指定している。
６、折れ線（polylineタグ）の属性について
例：<polyline points=”400,400 400,420 420,420 420,440 440,440 440,460 460,460 460,480 480,480 480,500 500,500″ fill=”white” stroke=”red” stroke-width=”4″ />
a.「points」は、線が折れる座標を定義している。例では、左上400pxから500pxの間を20pxづつ線を折っている。
７、多角線（polygonタグ）の属性について（その１）
例：<polygon points=”520,510 500,530 570,590 580,520″ fill=”lime” stroke=”purple” stroke-width=”1″ />
a.「points」は、角となる座標を定義している。例では、左上500pxから600pxの間で、４つの角を作成している。
８、多角線（polygonタグ）の属性について（その２）
例：<polygon points=”650,605 620,699 695,639 605,639 680,699″ fill=”lime” stroke=”Brown” stroke-width=”5″ fill-rule=”evenodd”/>
a.「points」は、指定されている順に線が描かれる事を利用して、左上600pxから700pxの間で、☆を描いてみました。
▼HTML
<svg> <rect height="100" width="100" x="0" y="0" fill="red" /> <circle cx="150" cy="150" r="50" fill="blue" /> <ellipse cx="250" cy="250" rx="50" ry="25" fill="yellow" /> <line x1="300" y1="300" x2="400" y2="400" stroke="rgb(255,0,0)" stroke-width="2" /> <polyline points="400,400 400,420 420,420 420,440 440,440 440,460 460,460 460,480 480,480 480,500 500,500" fill="white" stroke="red" stroke-width="4" /> <polygon points="520,510 500,530 570,590 580,520" fill="lime" stroke="purple" stroke-width="1" /> <polygon points="650,605 620,699 695,639 605,639 680,699" fill="lime" stroke="Brown" stroke-width="5" fill-rule="evenodd"/> </svg>
