Question

我有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>

由于 Gowri

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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

This is a good example

SVG文本在中心周围旋转

2 个答案: