7

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>

ありがとうゴウリ

4

2 に答える 2

14

回転によってテキストが移動しないように、テキストは水平方向と垂直方向の中央に配置する必要があります。

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

于 2015-05-04T04:04:11.777 に答える
5

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

cx, cy画面の中心 (または回転) の座標はどこにありますか。

これは良い例です

于 2013-05-24T01:18:14.473 に答える