围绕中心旋转 SVG 文本答案

【问题标题】：SVG Text Rotation Around the Center围绕中心旋转 SVG 文本
【发布时间】：2013-05-19 12:46:34
【问题描述】：

我的文本以 textContent "Design" 和 text-anchor 作为开始，用 css 转换为旋转 45 度。所以它得到旋转。问题是我需要在旋转后调整文本的 (x,y) 位置以显示刻度之间的文本，如预期图中所示。我怎样才能做到这一点。

结果： http://imageshack.us/content_round.php?page=done&l=img404/2711/result1h.png

预期： http://imageshack.us/content_round.php?page=done&l=img266/5138/expected1.png

    <svg>
    <text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start">Design</text>
    </svg>

谢谢高里

【问题讨论】：

您发布的链接已损坏

标签： jquery-svg

【解决方案1】：

文本需要水平和垂直居中，因此旋转不会移动它：

<text x="100" y="50" text-anchor="middle"
    dominant-baseline="central" transform="rotate(0, 100, 50)"></text>

text-anchor 水平对齐文本
dominant-baseline 垂直对齐文本

svg {
    width: 200px; height: 100px;
    text-align: center;
    border: solid 1px blue;
    font-family: monospace;
}

<svg>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(180, 100, 50)">
       Hello World
   </text>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(0, 100, 50)">
       Hello World
   </text>
</svg>

示例：http://jsfiddle.net/e4bAh/131/

【讨论】：

比我在其他地方看到的每个答案都简单得多，而且是最准确的！感谢 jsfiddle

【解决方案2】：

使用transform="rotate(45, cx, cy)"

其中cx, cy 是屏幕中心（或旋转）的坐标。

This is a good example

【讨论】：

我使用了 transform="rotate(45,100,100)"，我需要在旋转后更改我的文本位置
问题是确定svg文本的中心。