如何对SVG中的文本元素执行不同的平移和旋转定位点

Question

我想构建一个SVG，其中我使用一个定位点来设置文本，然后使用一个不同的定位点来进行旋转。具体来说，我想将文本翻译到（x，y）点，其中（x，y）是文本的左上角。然后我想围绕文本的中心点旋转文本。我不能仅仅用中心点作为锚来翻译文本，因为不可能事先得到文本的宽度和高度。（我使用Python）

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

我还应该注意，我想能够在adobeillustrator中查看这个文件。

Answer 1

有一种嵌入Javascript的SVG方法：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>

但我不知道adobeillustrator是否能处理这个问题。在