如何在 SVG 中的文本元素上为平移和旋转做不同的锚点答案

【问题标题】：How to do different anchor points for translation and rotation on a text element in an SVG如何在 SVG 中的文本元素上为平移和旋转做不同的锚点
【发布时间】：2015-03-20 19:20:22
【问题描述】：

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

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

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

【问题讨论】：

如果不知道文字的宽高，真的是没办法确定文字元素的中心。我不确定我是否找到了解决该问题的方法。

标签： python text svg rotation transform

【解决方案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>

但我不知道 Adobe Illustrator 是否可以做到这一点。

【讨论】：