旋轉元件的SVG

我有一個SVG圖，其中一部分如下所示是外拋出，旋轉元件的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

我如何可以旋轉自身位置的文本，也使其可見？

來源

2016-09-21 Not Known

當你這樣做：

<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中心做：

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

這將使ratate約1023文32.5。

請注意我忽略文本DOM的中心計算的文本寬度。

來源

2016-09-21 09:24:52 Cyril

如果OP將「text-anchor」設置爲中間，並將「dominant-baseline」設置爲中心，則您的答案的計算結果將位於文本的中心。 –

感謝您提供我從來不知道的關於這個技巧的新信息.. – Cyril

要繞自己的中心的文本，使用：

rotate(20, cx, cy)

凡cx和cy是文本的位置（包括所有的「翻譯」）。

來源

2016-09-21 09:23:52

旋轉元件的SVG

回答

相關問題