如何在SVG旋转期间保持文本方向不变 [英] how to keep text orientation unchanged during rotation in SVG
问题描述
我在 svg < g transform =rotate（45，10，30）> >同时围绕某个点旋转索姆圆圈和文本，但是，我想要保持每个单独字体的方向相同（例如，在文本移动/旋转时始终朝向一个方向）。
例如，如何在右侧图像中更改诸如A的标签以正确旋转后的方向？
我应该这样做吗？
谢谢！
编辑：这是一个动画示例，从来源。诀窍是用sin（）和cos（）三角函数在原点周围移动它。 I am using For example,how could I change the labels such as "A" in the right-side image to correct orientation after rotation?
How should I do that? Thanks! Instead of rotation of Edit: Here's an animated example, modified from this source. The trick is to move it around the origin with sin() and cos() trigonometric functions.
这篇关于如何在SVG旋转期间保持文本方向不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< g> group< / code>并且在其内部的文本反向旋转，请尝试此替代分组。围绕原点（0,0）的< g> ，以 x = 和 y = values&在 circle_group 上使用 rotate（degree，0，0），然后使用 translate（x，y ）在 main_group 上。
<！DOCTYPE html>
< html>
< head>
< title> JavaScript SVG Animation< / title>
< meta http-equiv =X-UA-Compatiblecontent =IE = Edge/> <！ - 在生产中删除此行。 - >
< / head>
< body>
< svg width =800pxheight =800pxviewBox =0 0 800 800>
< g transform =translate（400，400）> <！ - 为动画方块创建笛卡尔坐标系（y轴翻转）。也就是说，将原点放置在800 x 800 SVG视口的中心： - >
<！ - 200 x 200平方，左上角为（-100，-100）。这将方形
的中心放置在原点（0,0）处： - >
<！ - 表示x轴： - >
<！ - 代表y轴（虽然上升为负值而下跌为正值）： - >
< g id =circle_a>
< circle cx =0cy =0r =10fill =nonestroke =blue/>
< text x = - 5y =5width =20height =20> A< / text>
< / g>
< g id =circle_b>
< circle cx =0cy =0r =10fill =nonestroke =red/>
< text x = - 5y =5width =20height =20> B< / text>
< / g>
< / g>
< / svg>
< script>
使用严格;
/ * CONSTANTS * /
var initialTheta = 0; //初始旋转角度，以度为单位。
var thetaDelta = 0.3; //大约每16.7毫秒以度数旋转平方。
var angularLimit = 180; //旋转正方形的最大度数。
var theSquare = document.getElementById（mySquare）;
var circleA = document.getElementById（circle_a）;
var circleB = document.getElementById（circle_b）;
theSquare.currentTheta = initialTheta; //动画开始时使用的初始旋转角度，存储在自定义属性中。
var requestAnimationFrameID = requestAnimationFrame（doAnim）; //开始循环。
函数doAnim（）{
if（theSquare.currentTheta> angularLimit）{
cancelAnimationFrame（requestAnimationFrameID）; //正方形已经足够旋转，指示浏览器停止调用doAnim（）函数。
return; //没有任何意义，现在保释。
theSquare.setAttribute（transform，rotate（+ theSquare.currentTheta +））; //少量旋转方块。
circleA.setAttribute（transform，translate（+ Math.cos（（theSquare.currentTheta-45）* Math.PI / 180）* 141 +，+ Math.sin（（theSquare.currentTheta -45）* Math.PI / 180）* 141 + ））; //移动圆A
circleB.setAttribute（transform，translate（+ Math.cos（（theSquare.currentTheta + 45）* Math.PI / 180）* 141 +，+ Math。罪（（theSquare.currentTheta + 45）* Math.PI / 180）* 141 + ））; //移动圆B
theSquare.currentTheta + = thetaDelta; //增加方块旋转的角度，增加一小部分。
requestAnimationFrameID = requestAnimationFrame（doAnim）; //调用doAnim（）函数大约每秒60次（60 FPS），或者大约每16.7毫秒调用一次，直到调用cancelAnimationFrame（）。
}
< / script>
<g transform = "rotate(45, 10, 30)"> in svg to roate som circles and texts around a point at the same time, however, I want to keep orientation of each individual font the same (e.g., always facing one direction while the text is moved/rotated). <g>roup and reverse rotation of the text within it, try this alternate grouping. Center the <g> around origin(0,0) with negative x= and y= values & use rotate(degree, 0, 0) on circle_group, then translate(x,y) on the main_group. <!DOCTYPE html>
<html>
<head>
<title>JavaScript SVG Animation</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!-- Remove this line in production. -->
</head>
<body>
<svg width="800px" height="800px" viewBox="0 0 800 800">
<g transform="translate(400, 400)"> <!-- Create a Cartesian coordinate system (with the y-axis flipped) for the animated square. That is, place the origin at the center of the 800 x 800 SVG viewport: -->
<!-- A 200 x 200 square with the upper left-hand corner at (-100, -100). This places the center of the square
at the origin (0, 0): -->
<rect id="mySquare" x="-100" y="-100" width="200" height="200" rx="5" ry="5"
style=" fill: yellow; stroke: yellow; stroke-width: 1; stroke-dasharray: 10, 5;" />
<!-- Represents the x-axis: -->
<line x1="-400" y1="0" x2="400" y2="0" style="stroke: blue;" />
<!-- Represents the y-axis (although up is negative and down is positive): -->
<line x1="0" y1="-400" x2="0" y2="400" style="stroke: blue;" />
<circle cx="0" cy="0" r="141" fill="none" stroke="yellow"/>
<g id="circle_a">
<circle cx="0" cy="0" r="10" fill="none" stroke="blue"/>
<text x="-5" y="5" width="20" height="20">A</text>
</g>
<g id="circle_b">
<circle cx="0" cy="0" r="10" fill="none" stroke="red"/>
<text x="-5" y="5" width="20" height="20">B</text>
</g>
</g>
</svg>
<script>
"use strict";
/* CONSTANTS */
var initialTheta = 0; // The initial rotation angle, in degrees.
var thetaDelta = 0.3; // The amount to rotate the square about every 16.7 milliseconds, in degrees.
var angularLimit = 180; // The maximum number of degrees to rotate the square.
var theSquare = document.getElementById("mySquare");
var circleA = document.getElementById("circle_a");
var circleB = document.getElementById("circle_b");
theSquare.currentTheta = initialTheta; // The initial rotation angle to use when the animation starts, stored in a custom property.
var requestAnimationFrameID = requestAnimationFrame(doAnim); // Start the loop.
function doAnim() {
if (theSquare.currentTheta > angularLimit) {
cancelAnimationFrame(requestAnimationFrameID); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
return; // No point in continuing, bail now.
}
theSquare.setAttribute("transform", "rotate(" + theSquare.currentTheta + ")"); // Rotate the square by a small amount.
circleA.setAttribute("transform", "translate(" +Math.cos((theSquare.currentTheta-45)*Math.PI/180)*141 + "," + Math.sin((theSquare.currentTheta-45)*Math.PI/180)*141+")"); // Move the circle A
circleB.setAttribute("transform", "translate(" +Math.cos((theSquare.currentTheta+45)*Math.PI/180)*141 + "," + Math.sin((theSquare.currentTheta+45)*Math.PI/180)*141+")"); // move the circle B
theSquare.currentTheta += thetaDelta; // Increase the angle that the square will be rotated to, by a small amount.
requestAnimationFrameID = requestAnimationFrame(doAnim); // Call the doAnim() function about 60 times per second (60 FPS), or about once every 16.7 milliseconds until cancelAnimationFrame() is called.
}
</script>
