回転] SVG

Question

外に投げ要素私はSVGチャート、以下に示されているの一部を持って、

<div> 
    <svg class="bullet svg" width="1142" height="63" id="svg0"> 
     <g transform="translate(144,35)"> 
     <text transform="translate(10,10)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text> 
     </g> 
    </svg> 
</div> 

しかし、すぐに私は、テキストを回転させるように変換する回転を追加すると、テキストは単に消え、その位置

<div> 
    <svg class="bullet svg" width="1142" height="63" id="svg0"> 
     <g transform="translate(144,35) rotate(20)"> 
     <text transform="translate(10,10) rotate(20)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text> 
     </g> 
    </svg> 
</div> 

Screenshot

どのように私は、自身の位置にテキストを回転しても、それが見えるようにすることができますが変更？自身の中心の周りのテキストを回転させるように

Answer 1

あなたは：

<g transform="translate(144,35)"> 
     <text transform="translate(10,10) rotate (20)" x="869.5999999999999" y="-12.5" class="markerText" id="2100">2100</text> 
     </g> 

それは原点を中心に回転します。

だからあなたのDOMのテキストセンターは、次のようになります。

cx = 144 +10 + 869.599;//center x of text DOM..1023.599 
cy = 35 +10 + -12.5;//center of y of text DOM..32.5 

今あなたがTEXTのDOMの中心の周りを回転したいと実行します。これは、1023年についてのテキストをratate行います

<text transform="translate(10,10) rotate (20 1023 32.5)" ... 

、32.5。

ご注意テキストDOMのセンター計算のテキスト幅は無視しています。

Answer 2

、使用：

cxと cyは（すべての「並進」を含む）のテキストの位置である

rotate(20, cx, cy) 

。