我有以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>
谢谢
高里
最佳答案
文本需要水平和垂直居中,因此旋转不会移动它:
<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/
关于jquery-svg - SVG文本围绕中心旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16726115/