text要素

text要素の主な属性

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

主なフォント

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

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 + "追記";
}
 

最終更新のRSS
Last-modified: 2014-03-11 (火) 01:58:42 (1591d)