jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

SVG上のテキストの反転表示

Chrome d3.js HTML5 JavaScript svg

今回はSVGオブジェクトの上に設定したテキストをいろいろな向きに反転する方法をまとめます。
ポイントは次の2点です。

  • text要素ではなくその上位のg要素で反転させる
  • 反転に伴ってテキストが移動するので補正する

反転はテキスト要素ではなくg要素

SVGオブジェクトはテキスト要素を取れます。しかし、このテキスト要素には反転に関する属性がありません。今回は、グループコンテナであるg要素を利用します。g要素は、transform属性を与えられるので、この属性にscaleを指定すると反転ができます。また、scaleを利用して反転させるとg要素の範囲が移動しています。そのため、元の位置までテキストオブジェクトを移動して表示します。以下で具体的なやり方を見てみましょう。今回もD3.jsを利用した書き方をしています。

左右反転

では「りんご」という文字列を左右に反転させて表示します。

HTML

<html>
<body>

<div id = "text"></div>
<div id = "inverse"></div>
</body>
</html?

JavaScript

//通常のテキスト
var text = d3.select("#text")append("svg").attr("width",200).attr("height",100).append("g").append("text").attr("x",0).attr("y",0).style("fill", "black").style("font-size",28).text("りんご");

//反転テキスト
var text = d3.select("#inverse")append("svg").attr("width",200).attr("height",100).append("g").attr("transform","scale(-1,1)").append("text").attr("x",0).attr("y",0).attr("transform","translate(-84,0)").style("fill", "black").style("font-size",28).text("りんご");

実際には以下のように表示されます。（D3は使わずに等価のコードをhtmlで書いています。）

りんご
りんご

上記のコードのうち、gをappendした後のtransformとtextをappendした後のtransformが大事なところです。scaleではx軸とy軸のスケールを決めています。正の値の場合は拡大縮小の意味になりますが、、負の値は反転となります。左右に反転するときは最初の値を１から-1にします。

上下の反転

scale(-1,1)をscale(1,-1)、translate(-84,0)をtranslate(0,-28)に変更すると上下の反転ができます。

JavaScript

//通常のテキスト
var text = d3.select("#text")append("svg").attr("width",200).attr("height",100).append("g").append("text").attr("x",0).attr("y",0).style("fill", "black").style("font-size",28).text("りんご");

//反転テキスト
var text = d3.select("#inverse")append("svg").attr("width",200).attr("height",100).append("g").attr("transform","scale(1,-1)").append("text").attr("x",0).attr("y",0).attr("transform","translate(0,-28)").style("fill", "black").style("font-size",28).text("りんご");

実際には以下のように表示されます。（D3は使わずに等価のコードをhtmlで書いています。）

りんご
りんご

回転

左右反転と上下反転を組み合わせると回転になります。この回転は、文字ごとの回転ではなく、文字列全体が回転します。

JavaScript

//通常のテキスト
var text = d3.select("#text")append("svg").attr("width",200).attr("height",100).append("g").append("text").attr("x",0).attr("y",0).style("fill", "black").style("font-size",28).text("りんご");

//回転テキスト
var text = d3.select("#inverse")append("svg").attr("width",200).attr("height",100).append("g").attr("transform","scale(-1,-1)").append("text").attr("x",0).attr("y",0).attr("transform","translate(-84,-53)").style("fill", "black").style("font-size",28).text("りんご");

実際には以下のように表示されます。（D3は使わずに等価のコードをhtmlで書いています。）

りんご
りんご