月別アーカイブ: 2014年10月

SVG

SVG の表示する範囲を指定する – viewBox

コメントをどうぞ

viewBox 属性を指定すると SVG の表示範囲を決めることができます。

viewBox 属性は4つの値を「左上の x 座標」「左上の y 座標」「横幅」「高さ」の順に指定します。
以下の指定では、x 軸が -140、y 軸が -25 を起点として、横幅 500px 縦 250px の範囲を表示します。

<svg width="500" height="250" viewBox="-140 -25 500 250">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

サンプル

上記のコードの実行サンプルです。下の円は同じ SVG 画像ですが viewBox の指定をしていないため描写しきれずはみ出してしまいました。

viewBox を使って SVG 画像を縮小/拡大する

viewBox の表示範囲の指定と SVG のサイズを異なる指定にすると画像の縮小をすることができます。

SVG 画像のサイズよりも大きい viewBox の指定をすると縮小して表示されます。

<svg width="500" height="270" viewBox="-140 -25 600 300">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

逆に viewBox の表示範囲を SVG よりも小さくすると拡大して表示されます。

<svg width="500" height="250" viewBox="-140 -25 250 125">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

サンプル

上記のコードの実行サンプルです。一番上は SVG と viewBox を同じ大きさになっています。

SVG

CSS でスタイルとして指定できる属性と属性としか指定できないもの

コメントをどうぞ

属性でないと指定できないものは以下の様なものがあります。

座標に関する属性は CSS のスタイルとしては指定できません。

x / y / x1 / y1 / x2 / y2 / cx / cy / dx / dy / points / d

その他には、サイズの指定や半径の指定など。

width / height / r / rx / ry / rotate / textLength / kengthAdjust

属性一覧：Attribute Index – SVG 1.1 (Second Edition)

CSS でスタイルとして指定できるものは、以下のような外見に関するようなものです。

fill / fill-opacity / fill-rule / stroke / stroke-opacity / stroke-width 
/ stroke-linecap / stroke-dasharray / font / font-family / font-weight など

スタイルプロパティ一覧：Property Index – SVG 1.1 (Second Edition)

SVG

外部リンクを設定する – a要素

コメントをどうぞ

SVG 内の要素に外部リンクを設定するには、a要素で外部リンクを貼りたい要素を囲み xlink:href 属性でリンク先のアドレスを指定します。

<svg width="600" height="300">
    <circle cx="100" cy="100" r="50" fill="#F46860"/>
    <rect x="100" y="50" width="200" height="100" fill="#F46860"/>
    <a xlink:href="https://www.google.co.jp/">
        <circle cx="300" cy="100" r="50" fill="#30A8F5"/>
    </a>
</svg>

サンプル

上記のコードの実行サンプルです。青い丸の部分に外部リンクを貼りましたので、青い丸をクリックすると外部サイトへ飛びます。

a 要素で使用できる taget属性

a 要素で使用できる taget属性は通常の HTML と同じようなものになっています。
前項のサンプルでは iframe で表示しているので、_top を指定しています。

_blank 新しいウィンドウでリンク先を開く
_top フレーム内に設置した場合、フレームを解除しそのウィンドウ内でリンク先を開く
_self フレーム内に設置した場合、そのフレーム内にリンク先を開く
_parent フレーム内に設置した場合、親フレームにリンク先を開く

複数の要素にまとめてリンクを貼る

複数の要素にまとめてリンクを貼るには、g 要素の場合のようにまとめて貼りたい要素を a 要素で囲います。

<svg width="600" height="300">
    <a xlink:href="https://www.google.co.jp/">
        <circle cx="100" cy="100" r="50" fill="#F46860"/>
        <rect x="100" y="50" width="200" height="100" fill="#F46860"/>
        <circle cx="300" cy="100" r="50" fill="#30A8F5"/>
    </a>
</svg>

サンプル

画像全体にリンクが有効になりました。

SVG

要素を複製する – use要素/defs要素

コメントをどうぞ

SVG 内の要素を複製する方法として、use 要素のみで複製する方法と、defs 要素を合わせて使用し複製する方法があります。

use 要素のみでコピーする

use 要素でコピーする場合は、コピー元となる要素に id を振り、use 要素にそのコピー元の id を xlink:href 属性に指定します。x 属性と y 属性でコピー元からの相対的な座標を指定します。0 を指定した場合はコピー要素はコピー元要素と重なって表示されます。

<svg width="600" height="250">
    <circle id="copy" cx="150" cy="100" r="50" fill="#F46860"/>
    <use x="150" y="50" xlink:href="#copy" />
</svg>

ブラウザでの表示

use 要素のみでコピーしたブラウザでの表示

use 要素でコピーした図形に新たな属性を指定する

use 要素でコピーした図形にコピー元とは違う属性を指定することもできます。use 要素に stroke などの属性を指定すれば反映されます。

しかし、コピー元ですでに指定されている属性に関しては上書き変更できないため注意が必要です。use 要素で有効になるのは、コピー元で指定されていない属性のみです。

<svg width="600" height="250">
    <circle id="copy" cx="150" cy="100" r="50" fill="#F46860"/>
    <use x="150" y="50" xlink:href="#copy" fill="#69C0F9" stroke="#ccc" stroke-width="5" />
</svg>

ブラウザでの表示

use 要素でコピーした図形に新たな属性を指定したブラウザでの表示

use 要素 と defs 要素で要素を定義し複製する

use 要素 と defs 要素で複製する場合もまずコピーの元となる要素に id を振ります。defs 要素でコピー元を囲むと定義された要素ということになり非表示となります。

コピー元への指定を最小限にしておけば、コピーした側で要素で色や座標の変更も簡単に行え、便利に使用できます。

<svg width="600" height="250">
    <defs>
        <circle id="copy" cx="0" cy="0" r="50" />
    </defs>
    
    <use x="100" y="100" xlink:href="#copy" fill="#69C0F9" stroke="#ccc" stroke-width="5" />
    <use x="220" y="100" xlink:href="#copy" fill="#F46860" stroke="#666" stroke-width="5" />
</svg>

ブラウザでの表示

use 要素 と defs 要素で要素を定義し複製したブラウザでの表示

SVG

SVG 内に描いた複数の要素をグループ化する – g要素

コメントをどうぞ

SVG 内に描いた複数の要素をグループ化する g 要素を使用します。グループ化したい範囲を g 要素で囲む事でグループとしてみなされます。

グループ化した場合、見た目に変化はありませんが、グループ化するとグループごとにスタイルなどを一括で指定できるようになります。

<svg width="600" height="300">
    <g>
        <circle cx="50" cy="100" r="50" fill="#F46860"/>
        <rect x="50" y="50" width="300" height="100" fill="#F46860"/>
        <circle cx="350" cy="100" r="50" fill="#30A8F5"/>
    </g>
</svg>

ブラウザでの表示

SVG 内に描いた複数の要素をグループ化したブラウザでの表示

グループ化した要素に一括でスタイルを指定する

グループ化した g 要素へ属性指定などを行うとそのグループ全体にその指定が引き継がれる事になります。個別
に指定した属性などはそちらが優先されます。
例えば、g要素に fill=”fff” としても色はそれぞれの要素個別に指定されているので、変更されません。

<svg width="600" height="300">
    <g stroke="#666" stroke-width="5" fill-opacity="0.7" fill="#30A8F5">
        <circle cx="70" cy="100" r="50" fill="#30A8F5"/>
        <rect x="70" y="50" width="300" height="100" fill="#30A8F5"/>
        <circle cx="370" cy="100" r="50" fill="#F46860"/>
    </g>
</svg>

ブラウザでの表示

グループ化した要素に一括でスタイルを指定したブラウザでの表示

SVG

SVG 内に画像を表示する – image 要素

コメントをどうぞ

SVG 内に画像を表示するには image 要素を使用します。x 属性と y 属性で画像の左上となる座標を指定します。

<svg width="400" height="300">
   <image x="0" y="0" width="400" height="300" xlink:href="photo.JPG" />
</svg>

ブラウザでの表示

image 要素で画像を表示

画像の表示サイズを変更する

width 値を変更すると自動的にアスベスト比を変更して画像全体を表示してくれます。

<svg width="400" height="300">
   <image x="0" y="0" width="300" height="300" xlink:href="photo.JPG" />
</svg>

ブラウザでの表示

width 値を変更し画像を縮小したブラウザでの表示

画像の拡大縮小のされかたを指定する

画像の拡大縮小のされかたを指定したい場合は、preserveAspectRatio 属性に位置の指定と拡大縮小の方法を指定します。

位置指定の値

xMinYMin x方向が左端、y方向が上部
xMinYMid x方向が左端、y方向が中央
xMinYMax x方向が左端、y方向が下部
xMidYMin x方向が中央、y方向が上部
xMidYMid x方向が中央、y方向が中央
XMidYMax x方向が中央、y方向が下部
xMaxYMin x方向が右端、y方向が上部
xMaxYMid x方向が右端、y方向が中央
xMaxYMax x方向が右端、y方向が下部

縮小拡大の値

meet 画像全体を表示
slice 画像の一部を切り抜く
none 比率もimage要素のサイズにあわせる 
<svg width="400" height="300" style="border:solid 5px #ccc">
   <image x="0" y="0" width="300" height="300" xlink:href="photo.JPG" preserveAspectRatio="xMinYMid meet"　/>
</svg>

<svg width="400" height="300" style="border:solid 5px #ccc">
   <image x="0" y="0" width="200" height="300" xlink:href="photo.JPG" preserveAspectRatio="xMinYMax meet"　/>
</svg>

ブラウザでの表示

preserveAspectRatio=”xMinYMid meet”
preserveAspectRatio=

preserveAspectRatio=”xMinYMax meet”
preserveAspectRatio=

SVG

その他の text 要素で使用できる属性やスタイルなど

コメントをどうぞ

その他の text 要素で使用できる属性やスタイルなどをまとめました。

文字色を変更する

text 要素で表示されたテキストの文字色を変更するには、fill 属性を使用します。透明度は fill-opacity 属性で変更できます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5"/>
    <text x="80" y="105" fill="#fff" fill-opacity="0.8">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

文字色を変更したブラウザでの表示

書体や文字サイズを変更する

書体や文字サイズを変更したい場合は、通常の CSS と同じように font-family 属性や、font-size 属性を使用して変更することができます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5"/>
    <text x="80" y="110" font-family="Serif" font-size="25">明朝体へ変更して文字を大きくします。</text>
</svg>

ブラウザでの表示

書体や文字サイズを変更したブラウザでの表示

文字に枠線を加える

stroke 属性は text 要素にも使用でき、文字に縁取りを加えることが可能です。縁取りの位置は 中央 となり文字の境界部分に付けられます。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="85" y="115" fill="#fff" font-weight="bold" font-size="40" stroke="#999">文字に縁取りをつける。</text>
</svg>

ブラウザでの表示

文字に枠線を加えたブラウザでの表示

文字列内の一部のスタイルを変更する

文字列内の一部のスタイルを変更する場合は、tspan 要素を使用します。sapnタグと同じような役割の要素で、使用方法も span タグのように変更したい文字列を tspan 要素で囲む形になります。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="150" y="105" >テキストの<tspan font-size="30">一部</tspan>を変更する。</text>
</svg>

ブラウザでの表示

文字列内の一部のスタイルを変更したブラウザでの表示

文字を Path 要素の形にあわせて配置する

文字を Path 要素の形にあわせて配置するには、textpath 要素を使用します。

まずは path 要素でペジェ曲線を描写し、id を振っておきます。text 要素の中に textpath 要素を置き、パスに沿わせたい文字列を記入します。textpath 要素には xlink:href 属性でパスの id を指定します。

元となった path 要素には defs 要素で囲み定義文という位置づけに変更し、表示されないようにします。

<svg width="600" height="200">
<defs><path id="textpath" d="M65.000,157.000 C65.000,157.000 113.172,75.000 224.000,76.000 C334.828,77.000 314.172,158.000 426.000,156.000 C537.828,154.000 579.000,77.000 579.000,77.000 "/></defs>
<text>
    <textpath xlink:href="#textpath">テキストをパスに合わせて表示する。テキストをパスに合わせて表示する。</textpath>
</text>
</svg>

ブラウザでの表示

文字を Path 要素の形にあわせて配置したブラウザでの表示

SVG

SVG 内に文字を表示する – text 要素

コメントをどうぞ

SVG 描写内にテキストを表示する場合は text 要素を使用します。text 要素に文字を表示する位置の座標を x属性と y属性で記入し、表示したい文字列を text 要素で囲います。指定した座標がテキストのベースラインとなります。

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" fill="#F6675C" fill-opacity="0.6" />
    <text x="25" y="100">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

SVG 内に文字を表示したブラウザでの表示

文字の位置をばらばらにする

文字の位置をバラバラにするには、x属性 y属性それぞれに文字個別の座標を半角スペースで区切って記入します。文字数分の各属性値が指定されていない場合は、最後に指定されている位置でのこりの文字を表示します。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5"/>
    <text x="80 95 130 147 180" y="105 105 95 95 105">この部分の文字列が表示されます。</text>
</svg>

ブラウザでの表示

文字の位置をばらばらに表示したブラウザでの表示

文字の行揃えを設定する

行揃えを設定する場合は、text-anchor 属性を使用します。属性の値は、start が左揃え（デフォルト値）、middle が中央揃え、end が右揃えとなっています。

行揃えといっても、SVG 要素のサイズにあわせて行揃えというわけではなく、指定した x属性の座標を起点として、xの位置をスタート値とするのが start、xの位置を文字列の中央とするのが middle、xの位置を文字列の右端とするのが end。といった形になります。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="200" y="85" text-anchor="start">1. デフォルトのテキスト表示。</text>
    <text x="200" y="110" text-anchor="middle">2. middle のテキスト表示。</text>
    <text x="200" y="135" text-anchor="end">3. end のテキスト表示。</text>
</svg>

ブラウザでの表示

文字の行揃えを設定したブラウザでの表示

文字を指定した座標よりもずらして表示する

文字を指定した座標よりもずらして表示するには、dx属性と dy属性を使用します。指定した座標よりも左右に移動させたい場合は dx属性、指定した座標よりも上下に移動させたい場合は dy属性にずらしたい値を指定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="200" y="85">1. デフォルトの位置。</text>
    <text x="200" y="110" dx="50">2. 左へ50px移動。</text>
    <text x="200" y="135" dy="30">3. 下へ30px移動。</text>
</svg>

ブラウザでの表示

文字を指定した座標よりもずらして表示したブラウザでの表示

文字を回転して表示する

文字を回転して表示するには、rotate 属性を使用します。属性の値には傾きの度数を数値で指定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="170" y="100" rotate="20">テキストを傾けて表示する。</text>
</svg>

ブラウザでの表示

文字を回転して表示したブラウザでの表示

文字を均等割付けで表示する

文字を指定した長さで均等割付け表示するには、textLength 属性を使用します。属性の値には文字を表示したい長さを指定します。均等割り付けした上で、文字の文字との間隔を文字列の横幅で埋めたい場合は lengthAdjust属性に spacingAndGlyphs を指定します。デフォルトは間隔は空白にする spacing となっています。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#00CFB4" fill-opacity="0.5" />
    <text x="130" y="95" textLength="300">テキストを均等割付けする。</text>
    <text x="80" y="120" textLength="400" lengthAdjust="spacingAndGlyphs">均等割付けし間隔を文字の幅で埋める。</text>
</svg>

ブラウザでの表示

文字を均等割付けで表示したブラウザでの表示

文字を縦書きで表示する

文字を縦書きで表示するには、writing-mode 属性を使用し、値に tb を設定します。

<svg width="500" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F6675C" fill-opacity="0.5" />
    <text x="130" y="65" writing-mode="tb">たてがき</text>
</svg>

ブラウザでの表示

文字を縦書きで表示したブラウザでの表示

SVG

path 要素で使用できるコマンド

コメントをどうぞ

path 要素で使用できるコマンドと指定方法をまとめました。

M
始点の座標を指定 M x,y
Z
パスを閉じる Z
L
直線を描写 L x,y
H
水平線を描写 H x
V
垂直線を描写 V y
A
曲線を描写 Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y
※具体的な意味は前項前項をご参照下さい。
Q
2次ペジェ曲線を描写 Qx1,y1 x,y
T
2次ペジェ曲線を座標のみで描写
※3つめの座標として設定可能		 Tx,y
C
3次ペジェ曲線を描写 Cx1,y1 x2,y2 x,y
S
3次ペジェ曲線を第２制御点と座標で描写
※3つめの座標として設定可能		 Sx1,y1 x,y
SVG

パスを描く – path 要素

コメントをどうぞ

パスの描写には path 要素が使用されます。d 属性にコマンドと描写される座標を x,y といった形で記述します。d 属性のコマンドは、M が始点の座標、z がパスを閉じるという意味になります。例えば、「M50,50」なら 始点の座標のx軸が50、y軸が50といった形です。

各コマンドを大文字で記入すると絶対値、小文字で記入すると相対値での指定になります。

始点から終点までを描写するコマンドは、L が直線、H が水平線、V が垂直線、A が曲線です。その他のコマンドはこちらのページ path 要素で使用できるコマンド にまとめました。

直線を path で描く

path 要素で直線を描くには、Mコマンドで始点の座標、Lコマンドで移動先の座標、Zコマンドで終点の座標を記述します。

<svg width="400" height="100">
    <path d="M50,50 L450,50 Z" fill="none" stroke="#666" stroke-width="10" />
</svg>

ブラウザでの表示

Lコマンドで直線を描いたブラウザでの表示

Hコマンドでも直線を描くことができます。Hコマンドは水平線を描くコマンドです。Mコマンドで始点を記入し、Hコマンドで移動先のx軸の座標を記入します。

<svg width="400" height="100">
    <path d="M50,50 H450 Z" fill="none" stroke="#666" stroke-width="10" />
</svg>

ブラウザでの表示

Mコマンドで直線を描いたブラウザでの表示

四角形を path で描く

path 要素で四角形を描くには、Mコマンドで始点を記入し、Hコマンドで水辺の直線を描き、垂直の直線をVコマンドで描きます。Vコマンドは 垂直線を描くコマンドで、移動先のy軸のみの指定で描く事ができます。

<svg width="300" height="300">
    <path d="M50,50 H250 V250 H50 V50 Z" fill="#1FCEB4" stroke="#666" stroke-width="10" />
</svg>

ブラウザでの表示

四角形を path で描いたブラウザでの表示

三角形を path で描く

path 要素で三角形を描くには、Hコマンドで水辺の直線を描き、斜めの直線はLコマンドで描きます。

<svg width="350" height="350">
    <path d="M150,70 L280,320 H280,20 L150,70 Z" fill="#F47197" stroke="#666" stroke-width="5" />
</svg>

ブラウザでの表示

三角形を path で描いたブラウザでの表示

曲線を path で描く

曲線を path で描くには、Aコマンドを使用します。Aコマンドでは、rx,ry で水平と垂直の方向の半径、x-axis-rotation で曲線の傾きの度数、large-arc-flag で円の選択（0 が短い方、1 が長い方）、sweep-flag で円の選択（0 が反時計回り、1 が時計回り）、x,y 移動先の座標 を指定できます。

<svg width="350" height="350">
    <path d="M50,250 L50,50 A50,50 0 0,1 50,250 z" fill="none" stroke="#666" stroke-width="1" />
</svg>

ブラウザでの表示

曲線を path で描いたブラウザでの表示

円を path で描く

曲線を path で描いたように半円を描き、そこからもう一つ半円を作って正円にします。

<svg width="300" height="300">
    <path d="M150,50 A50,50 0 0,1 150,250 A50,50 0 0,1 150,50 z" fill="#8BD131" />
</svg>

ブラウザでの表示

円を path で描いたブラウザでの表示

path で2次ペジェ曲線を描く

path で2次ペジェ曲線を描くには Q コマンドを使用します。Q コマンドには X1,y1 で制御先の座標、x,y で移動先の座標を指定します。２番目以降の制御点では T コマンドを使用することができ、制御点の指定のみで曲線を描く事ができます。

<svg width="600" height="220">
    <path d="M50,150 Q50,50 250,150 Q250,250 450,150 T550 150" fill="#F66F96" />
</svg>

ブラウザでの表示

path で2次ペジェ曲線を描いたブラウザでの表示

path で3次ペジェ曲線を描く

path で3次ペジェ曲線を描くには C コマンドを使用します。C コマンドは X1,y1 で1つめ制御先の座標、 X2,y2 で2つめ制御先の座標、x,y で移動先の座標を指定します。3番目以降の制御点では S コマンドを使用することができ、制御点の指定のみで曲線を描く事ができます。

<svg width="600" height="220">
    <path d="M50,100 C50,0 250,250 350,150 S450,50 470,100" fill="#89D319" />
</svg>

ブラウザでの表示

path で3次ペジェ曲線を描いたブラウザでの表示