SVGによる線種の設定

icon 項目のみ表示/展開表示の切り替え

概要

線分の書式

strokeで色指定、stroke-widthで線の太さ、 stroke-dasharray で破線の指定、marker-start・marker-endはマーカーのidを指定します。

マーカー

マーカーを指定することにより矢印等を線分に付加することができます。
< marker>により宣言しid名を指定します。このid名を線分のmarker-start・marker-endで指定することによりマーカーを付加することができます。
本例では線分で矢印を作成していますが、任意の図形を指定可能です。
マーカーはviewBoxで示される座標範囲に描画され、実際の大きさはmarker-width・marker-heightの範囲に投影されます。refX・refYで示され位置(viewBoxの座標が基準)が線分の端点となります。orientを指定することにより線分の傾きに合わせてマーカーも回転します。マーカーの図形は水平線を基準に指定します。
ディフォルトでは線分の太さによってマーカーサイズが自動的に拡大されますが、markerUnits属性にuserSpaceOnUseを指定すると拡大されないようになります。

破線

stroke-dasharray(パターン)

"線の長さ 空白の長さの"順番で破線のパターンを指定します。複数回連続して指定可能です。
stroke-dasharray="4 4"
stroke-dasharray="24 3 2 3"
stroke-dasharray="24 3 2 3 2 3"

stroke-dashoffset(開始位置)

破線の開始位置を指定できます。以下に8間隔の破線とその破線の開始位置を8ずらした例を図示します。
stroke-dasharray="8 8"
stroke-dasharray="8 8" stroke-dashoffset="8"

破線を使用したアニメーション

破線の開始位置又は破線の長さの比率を変えることにより簡単なアニメーションを作成することができます。
以下の例は上下別々の円弧についてjavascriptを使用し曲線の長さをgetTotalLength()で取得し0.2秒おきにstroke-dasharrayとstroke-dashoffsetを設定することによりアニメーションを構成しています。

stroke-dasharray="8 8"
8 8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<svg width="200" height="200"  viewBox="0 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<path id="ani_dash1" d="M 0,0 A 100,100 0 0 0 200,0" stroke="black" fill="none"/>
<path id="ani_dash2" d="M 0,0 A 100,100 0 0 1 200,0" stroke="red" fill="none"/>
</svg>
<script type="text/javascript">

var len1=0;//曲線長さ
var ani1_count=0;

function ani1(){
  if(ani1_count<len1-10)
    ani1_count+=10;
  else {
    ani1_count=0;
  }
  var t=ani1_count+" "+(len1-ani1_count);
  var svg=document.getElementById("ani_dash1");
  svg.setAttribute("stroke-dasharray",t);
  svg=document.getElementById("ani_dash2");
  svg.setAttribute("stroke-dashoffset",ani1_count);
  setTimeout("ani1()",200);
}


window.onload = function(){
// ページ読み込み時に実行したい処理
   var obj=document.getElementById("ani_dash1");
   len1=Math.floor(obj.getTotalLength());
   obj=document.getElementById("ani_dash2");
   obj.setAttribute("stroke-dasharray",16+" "+(len1-16));
   ani1();

}
</script>

</body>
</html>

フォームより数値を入力して実際に描画してみる

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるように指定してください。

線種 線の太さ:stroke-width=
破線を有効にする:stroke-dasharray= 破線パターン:stroke-dasharray=
マーカー 始点:marker-start
終点:marker-end
矢印方向自動制御:orient
自動拡大:markerUnits
長さ:markerWidth= 幅M:markerHeight=


(0,0) (0,-100) (0,100) (-100,0) (100,0)

初期表示状態と同じ図形を描画するhtmlソース

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <svg width="100" height="100"  viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
        <marker id="marker1" viewBox="-10 -5 10 10" refX="-10" refY="0" markerWidth="10" markerHeight="10" orient="auto">
                <path d="M -10 0 L 0 -5 L 0 5 Z"/>
        </marker>
        <marker id="marker2" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="10" markerHeight="10" orient="auto">
                <path d="M 0 -5 L 0 5 L 10 0 Z"/>
        </marker>
        <line id="line1" x1="-50" y1="-50" x2="50" y2="50" stroke="black" marker-start="url(#marker1)" marker-end="url(#marker2)" stroke-width="1" stroke-dasharray="4 4"/>
    </svg>
</body>
</html>

標準色名

色名 色 RGB R G B H S L 16
AliceBlue #F0F8FF 240 248 255 208 5.9 255
AntiqueWhite #FAEBD7 250 235 215 34 14 250
Aqua #00FFFF 0 255 255 180 100 255 ○
Aquamarine #7FFFD4 127 255 212 160 50.2 255
Azure #F0FFFF 240 255 255 180 5.9 255
Beige #F5F5DC 245 245 220 60 10.2 245
Bisque #FFE4C4 255 228 196 33 23.1 255
Black #000000 0 0 0 0 ○
BlanchedAlmond #FFEBCD 255 235 205 36 19.6 255
Blue #0000FF 0 0 255 240 100 255 ○
BlueViolet #8A2BE2 138 43 226 271 81 226
Brown #A52A2A 165 42 42 0 74.5 165
BurlyWood #DEB887 222 184 135 34 39.2 222
CadetBlue #5F9EA0 95 158 160 182 40.6 160
Chartreuse #7FFF00 127 255 0 90 100 255
Chocolate #D2691E 210 105 30 25 85.7 210
Coral #FF7F50 255 127 80 16 68.6 255
CornflowerBlue #6495ED 100 149 237 219 57.8 237
Cornsilk #FFF8DC 255 248 220 48 13.7 255
Crimson #DC143C 220 20 60 348 90.9 220
Cyan #00FFFF 0 255 255 180 100 255 ○
DarkBlue #00008B 0 0 139 240 100 139
DarkCyan #008B8B 0 139 139 180 100 139
DarkGoldenRod #B8860B 184 134 11 43 94 184
DarkGray #A9A9A9 169 169 169 0 169
DarkGrey #A9A9A9 169 169 169 0 169
DarkGreen #006400 0 100 0 120 100 100
DarkKhaki #BDB76B 189 183 107 56 43.4 189
DarkMagenta #8B008B 139 0 139 300 100 139
DarkOliveGreen #556B2F 85 107 47 82 56.1 107
Darkorange #FF8C00 255 140 0 33 100 255
DarkOrchid #9932CC 153 50 204 280 75.5 204
DarkRed #8B0000 139 0 0 0 100 139
DarkSalmon #E9967A 233 150 122 15 47.6 233
DarkSeaGreen #8FBC8F 143 188 143 120 23.9 188
DarkSlateBlue #483D8B 72 61 139 248 56.1 139
DarkSlateGray #2F4F4F 47 79 79 180 40.5 79
DarkSlateGrey #2F4F4F 47 79 79 180 40.5 79
DarkTurquoise #00CED1 0 206 209 181 100 209
DarkViolet #9400D3 148 0 211 282 100 211
DeepPink #FF1493 255 20 147 328 92.2 255
DeepSkyBlue #00BFFF 0 191 255 195 100 255
DimGray #696969 105 105 105 0 105
DimGrey #696969 105 105 105 0 105
DodgerBlue #1E90FF 30 144 255 210 88.2 255
FireBrick #B22222 178 34 34 0 80.9 178
FloralWhite #FFFAF0 255 250 240 40 5.9 255
ForestGreen #228B22 34 139 34 120 75.5 139
Fuchsia #FF00FF 255 0 255 300 100 255 ○
Gainsboro #DCDCDC 220 220 220 0 220
GhostWhite #F8F8FF 248 248 255 240 2.7 255
Gold #FFD700 255 215 0 51 100 255
GoldenRod #DAA520 218 165 32 43 85.3 218
Gray #808080 128 128 128 0 128 ○
Grey #808080 128 128 128 0 128 ○
Green #008000 0 128 0 120 100 128 ○
GreenYellow #ADFF2F 173 255 47 84 81.6 255
HoneyDew #F0FFF0 240 255 240 120 5.9 255
HotPink #FF69B4 255 105 180 330 58.8 255
IndianRed #CD5C5C 205 92 92 0 55.1 205
Indigo #4B0082 75 0 130 275 100 130
Ivory #FFFFF0 255 255 240 60 5.9 255
Khaki #F0E68C 240 230 140 54 41.7 240
Lavender #E6E6FA 230 230 250 240 8 250
LavenderBlush #FFF0F5 255 240 245 340 5.9 255
LawnGreen #7CFC00 124 252 0 90 100 252
LemonChiffon #FFFACD 255 250 205 54 19.6 255
LightBlue #ADD8E6 173 216 230 195 24.8 230
LightCoral #F08080 240 128 128 0 46.7 240
LightCyan #E0FFFF 224 255 255 180 12.2 255
LightGoldenRodYellow #FAFAD2 250 250 210 60 16 250
LightGray #D3D3D3 211 211 211 0 211
LightGrey #D3D3D3 211 211 211 0 211
LightGreen #90EE90 144 238 144 120 39.5 238
LightPink #FFB6C1 255 182 193 351 28.6 255
LightSalmon #FFA07A 255 160 122 17 52.2 255
LightSeaGreen #20B2AA 32 178 170 177 82 178
LightSkyBlue #87CEFA 135 206 250 203 46 250
LightSlateGray #778899 119 136 153 210 22.2 153
LightSlateGrey #778899 119 136 153 210 22.2 153
LightSteelBlue #B0C4DE 176 196 222 214 20.7 222
LightYellow #FFFFE0 255 255 224 60 12.2 255
Lime #00FF00 0 255 0 120 100 255 ○
LimeGreen #32CD32 50 205 50 120 75.6 205
Linen #FAF0E6 250 240 230 30 8 250
Magenta #FF00FF 255 0 255 300 100 255 ○
Maroon #800000 128 0 0 0 100 128 ○
MediumAquaMarine #66CDAA 102 205 170 160 50.2 205
MediumBlue #0000CD 0 0 205 240 100 205
MediumOrchid #BA55D3 186 85 211 288 59.7 211
MediumPurple #9370D8 147 112 216 260 48.1 216
MediumSeaGreen #3CB371 60 179 113 147 66.5 179
MediumSlateBlue #7B68EE 123 104 238 249 56.3 238
MediumSpringGreen #00FA9A 0 250 154 157 100 250
MediumTurquoise #48D1CC 72 209 204 178 65.6 209
MediumVioletRed #C71585 199 21 133 322 89.4 199
MidnightBlue #191970 25 25 112 240 77.7 112
MintCream #F5FFFA 245 255 250 150 3.9 255
MistyRose #FFE4E1 255 228 225 6 11.8 255
Moccasin #FFE4B5 255 228 181 38 29 255
NavajoWhite #FFDEAD 255 222 173 36 32.2 255
Navy #000080 0 0 128 240 100 128 ○
OldLace #FDF5E6 253 245 230 39 9.1 253
Olive #808000 128 128 0 60 100 128 ○
OliveDrab #6B8E23 107 142 35 80 75.4 142
Orange #FFA500 255 165 0 39 100 255
OrangeRed #FF4500 255 69 0 16 100 255
Orchid #DA70D6 218 112 214 302 48.6 218
PaleGoldenRod #EEE8AA 238 232 170 55 28.6 238
PaleGreen #98FB98 152 251 152 120 39.4 251
PaleTurquoise #AFEEEE 175 238 238 180 26.5 238
PaleVioletRed #D87093 216 112 147 340 48.1 216
PapayaWhip #FFEFD5 255 239 213 37 16.5 255
PeachPuff #FFDAB9 255 218 185 28 27.5 255
Peru #CD853F 205 133 63 30 69.3 205
Pink #FFC0CB 255 192 203 350 24.7 255
Plum #DDA0DD 221 160 221 300 27.6 221
PowderBlue #B0E0E6 176 224 230 187 23.5 230
Purple #800080 128 0 128 300 100 128 ○
Red #FF0000 255 0 0 0 100 255 ○
RosyBrown #BC8F8F 188 143 143 0 23.9 188
RoyalBlue #4169E1 65 105 225 225 71.1 225
SaddleBrown #8B4513 139 69 19 25 86.3 139
Salmon #FA8072 250 128 114 6 54.4 250
SandyBrown #F4A460 244 164 96 28 60.7 244
SeaGreen #2E8B57 46 139 87 146 66.9 139
SeaShell #FFF5EE 255 245 238 25 6.7 255
Sienna #A0522D 160 82 45 19 71.9 160
Silver #C0C0C0 192 192 192 0 192 ○
SkyBlue #87CEEB 135 206 235 197 42.6 235
SlateBlue #6A5ACD 106 90 205 248 56.1 205
SlateGray #708090 112 128 144 210 22.2 144
SlateGrey #708090 112 128 144 210 22.2 144
Snow #FFFAFA 255 250 250 0 2 255
SpringGreen #00FF7F 0 255 127 150 100 255
SteelBlue #4682B4 70 130 180 207 61.1 180
Tan #D2B48C 210 180 140 34 33.3 210
Teal #008080 0 128 128 180 100 128 ○
Thistle #D8BFD8 216 191 216 300 11.6 216
Tomato #FF6347 255 99 71 9 72.2 255
Turquoise #40E0D0 64 224 208 174 71.4 224
Violet #EE82EE 238 130 238 300 45.4 238
Wheat #F5DEB3 245 222 179 39 26.9 245
White #FFFFFF 255 255 255 0 255 ○
WhiteSmoke #F5F5F5 245 245 245 0 245
Yellow #FFFF00 255 255 0 60 100 255 ○
YellowGreen #9ACD32 154 205 50 80 75.6 205