SVG文本绕中心旋转

Question

我有一段文本，textContent为“Design”，text-anchor为start，使用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>

感谢您，Gowri。

- Code Break

---

你发布的链接已经失效。 - tnrich

Answer 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/

- Mingwei Samuel

---

比其他我看到的所有答案都简单多了，而且它是最准确的！感谢 jsfiddle。 - kevlarr

Answer 2

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

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

这是一个很好的例子

- user2415826

---

我已经使用了 transform="rotate(45,100,100)"，但我需要在旋转后改变我的文本位置。 - Code Break

问题是确定 SVG 文本的中心。 - Mish.k.a