SVG/text - a羅針盤

text要素 †

text要素の主な属性

属性	説明	値
x	x座標	正数値
y	y座標	正数値
font-family	フォント	下表参照
font-size	フォントサイズ
font-style	フォントのスタイル	normal,italic,oblique(斜体)
font-weight	フォント太さ	normal,bold,bolder,lighter,100,...,900
fill	塗りつぶし色
stroke	文字の外形の色
text-anchor	textの基準位置	start,middle,end
stroke-width	文字の外形の線幅
letter-spacing	文字間
text-decoration	文字の修飾	underline,overline,line-through,blink
writing-mode		tb=縦書き

主なフォント

フォント名称	値
MS 明朝	MS-Mincho
MS P明朝	MS-PMincho
MS ゴシック	MS-Gothic
MS Pゴシック	MS-PGothic
Arial	Arial

↑

tspan †

text要素の子要素として、その個所の文字フォントを変更したり、文字の色を変更したり、位置をずらしたりするときに使います。

tspanの主な属性と記述方法

<text>
文字列-1
<tspan
　　　　x="x座標" y="y座標"
　　　　dx="現在のx座標からの移動値"
　　　　dy="現在のy座標からの移動値"
　　　　font-family="フォント名"
　　　　font-size="文字サイズ"
　　　　fill="塗りつぶし色"
　　　　stroke="文字の外形の色"
　　　　stroke-width="文字の外形の線幅">
文字列-2
</tspan>
文字列-3
</text>

↑

文字列の操作 †

text要素の内部の文字列を読みとったり、変更するするにはSVGのDOMインターフェースではなくHTML/XMLのDOM CoreインターフェースのtextContentを用いてアクセスします。

textの文字列の変更例

function textReplace( evt ) {

    var element = evt ? evt.target : window.event.srcElement;

    var txt = element.getElementById("ID1").textContent;
    element.getElementById("ID1").textContent= txt + "追記";
}

前へ　 SVG目次　次へ

Last-modified: 2014-03-11 (火) 01:58:42 (3690d)