英文:
Text in a SVG: Rotate a text within a circle on place
问题
我有一个圆圈中的文本（这就是为什么我使用
这是我目前的代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200"
viewBox="0 0 200 200"
preserveAspectRatio="xMinYMin">
<style>
circle{
fill: #dcdcc6;
}
text{
font-size: 11px;
text-anchor: middle;
fill: rgb(51, 65, 74);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
<symbol id="circle" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7"></circle>
</symbol>
<g>
<use href="#circle" x="100" y="100" width="40" height="40"></use>
<svg x="100" y="100" height="40" width="40">
<g>
<text x="50%" y="60%" text-anchor="end">TEXT</text>
</g>
</svg>
</g>
</svg>
<script>
var angle = 45;
var text = document.querySelector('text');
text.addEventListener('click', function(event) {
angle += 45;
var bbox = this.getBBox();
var width = bbox.width;
var height = bbox.height;
this.setAttribute('transform', 'translate(' + (height / 2) + ',' + (height / 2) + ') rotate(' + angle + ')');
});
</script>
</body>
</html>
英文:
I have several text in circle (that's why I use <use> to define circle once). I want to rotate the text on itself in that circle. My problem is: when I perform a rotation of the text, the text in no longer within the circle. How can I keep the text in the circle when applying a rotation? How can I make the text rotate at its center?
Here is the code I have for now:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200"
viewBox="0 0 200 200"
preserveAspectRatio="xMinYMin">
<style>
circle{
fill: #dcdcc6;
}
text{
font-size: 11px;
text-anchor: middle;
fill: rgb(51, 65, 74);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
<symbol id="circle" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7"></circle>
</symbol>
<g>
<use href="#circle" x="100" y="100" width="40" height="40"></use>
<svg x="100" y="100" height="40" width="40">
<g>
<text x="50%" y="60%" text-anchor="end">TEXT</text>
</g>
</svg>
</g>
</svg>
<script>
var angle = 45;
var text = document.querySelector('text');
text.addEventListener('click', function(event) {
angle += 45;
var bbox = this.getBBox();
var width = bbox.width;
var height = bbox.height;
this.setAttribute('transform', 'translate(' + (height / 2) + ',' + (height / 2) + ') rotate(' + angle + ')');
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 3
如果将文本和圆放在0,0位置，然后使用transform/translate将它们移动到中心，你的代码将变得更加直观。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
<symbol id="circle" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7"></circle>
</symbol>
<g transform="translate(100 100)">
<use href="#circle" transform="translate(-20 -20)" width="40" height="40"/>
<text text-anchor="middle" dominant-baseline="middle">文本</text>
</g>
</svg>
circle {
fill: #dcdcc6;
}
text {
font-size: 11px;
fill: rgb(51, 65, 74);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
var angle = 0;
var text = document.querySelector('text');
text.addEventListener('click', function(event) {
angle += 45;
this.setAttribute('transform', 'rotate(' + angle + ')');
});
英文:
If you place the text and the circle in 0,0 and then move them to the center using transform/translate you code becomes more straight-forward.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var angle = 0;
var text = document.querySelector('text');
text.addEventListener('click', function(event) {
angle += 45;
this.setAttribute('transform', 'rotate(' + angle + ')');
});
<!-- language: lang-css -->
circle {
fill: #dcdcc6;
}
text {
font-size: 11px;
fill: rgb(51, 65, 74);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<!-- language: lang-html -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin">
<symbol id="circle" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7"></circle>
</symbol>
<g transform="translate(100 100)">
<use href="#circle" transform="translate(-20 -20)" width="40" height="40"/>
<text text-anchor="middle" dominant-baseline="middle">TEXT</text>
</g>
</svg>
<!-- end snippet -->
答案2
得分: 0
感谢AndTheGodsMadeLove
transform-origin CSS属性起了作用。
更改为：
this.setAttribute('transform', 'rotate(' + angle + ')');
this.setAttribute('transform-origin', 'center');
英文:
thanks to AndTheGodsMadeLove
The transform-origin CSS property made the trick.
Changed to:
this.setAttribute('transform', 'rotate(' + angle + ')');
this.setAttribute('transform-origin', 'center');
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论