SVG以％爲單位旋轉文本爲單位

Question

我嘗試旋轉svg文本。我通過從xslt調用php函數來獲得文本的位置，即％，即15％。問題是我無法使用％旋轉svg對象。它工作，如果我用一個數字代替。 下面我表現爲簡化問題：

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://ww.w3.org/2001/xml-events" xmlns:php="http://php.net/xsl" version="1.1" baseProfile="full"> 
    <text x="50%" y="50%" transform="rotate(-90 50% 50%)">rotateMe</text> 
    <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/> 
</svg> 

的這張照片是在我的瀏覽器屏幕

的中間，我想，它看起來像這樣：

但它不因爲工作％

transform="rotate(-90 **50% 50%**)" 

它是要求我使用％作爲座標。任何想法或解決我的問題？

謝謝您的高級。

Answer 1

您可以使用內部元素<svg>來轉換座標。下面的例子顯示了你的「我希望它看起來像這樣」的Firefox位圖。

如果您無法在任何瀏覽器上看到文本，請嘗試向內部<svg>元素添加overflow =「visible」，以便您可以看到它在哪裏結束。並非所有的瀏覽器都支持顯性基線屬性，因此您可能需要翻閱文本的y屬性。

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <svg x="50%" y="50%" width="100" height="100"> 
     <text text-anchor="end" dominant-baseline="text-before-edge" transform="rotate(-90 0 0)">rotateMe</text> 
    </svg> 
    <line x1="50%" y1="47%" x2="60%" y2="47%" stroke="black" stroke-width="2px"/> 
</svg>