如何在SVG中的文本元素上进行平移和旋转的不同锚点

Question

我想构建一个SVG，我使用一个锚点为x，y平移设置文本，然后使用不同的锚点进行旋转。具体来说，我想将文本转换为点（x，y），其中（x，y）是文本的左上角。然后我想旋转关于其中心点的文本。我不能只使用中心点作为锚来翻译文本，因为不可能提前获得文本的宽度和高度。 （我正在使用Python）

这是一张描绘我想要使用的两个锚点的图像。

另外我应该注意，我希望能够在Adobe Illustrator中查看此文件。

Answer 1

SVG可以通过嵌入式Javascript实现：http://jsfiddle.net/bLuc315m/3/

<svg width="320" height="320" viewBox="0 0 320 320" onload="init(this, 100, 100, 30)">
<script>
    function init(doc, x, y, ang) {
        var e = doc.querySelector("#txt");
        var b = e.getBoundingClientRect();
        var w = b.width;
        var h = b.height;
        e.setAttribute(
            "transform", 
            "translate(" + x + "," + y + ")"
            + "translate(" + (w/2) + "," + (h/2) +")"        
            + "rotate(" + ang + ")"
            + "translate(" + (-w/2) + "," + (h/2) +")"        
        );
    }
</script>
<g stroke="#999" stroke-width="0.5">
    <path d="M100,0V320"/>
    <path d="M0,100H320"/>
</g>
<text id="txt" x="0" y="0" font-size="20" 
    fill="black" stroke="none">TEXT</text>
</svg>

但我不知道Adobe Illustrator是否可以管理它。