如何在SVG旋转期间保持文本方向不变(how to keep text orientation unchanged during rotation in SVG)

HTML/CSS IT屋
百度翻译此文   有道翻译此文
问 题

I am using <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).

For example,how could I change the labels such as "A" in the right-side image to correct orientation after rotation? enter image description here

How should I do that?

Thanks!

解决方案

Instead of rotation of <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.

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.

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

本文地址:IT屋 » how to keep text orientation unchanged during rotation in SVG

问 题

我在 svg 同时围绕某个点旋转索姆圆圈和文本,但是,我想要保持每个单独字体的方向相同(例如,在文本移动/旋转时始终朝向一个方向)。

例如,如何在右侧图像中更改诸如“A”的标签以正确旋转后的方向?



我应该这样做吗?



谢谢!


解决方案

< g> group< / code>并且在其内部的文本反向旋转,请尝试此替代分组。围绕原点(0,0)的< g> ,以 x = 和 y = values&在 circle_group 上使用 rotate(degree,0,0),然后使用 translate(x,y )在 main_group 上。

编辑:这是一个动画示例,从来源。诀窍是用sin()和cos()三角函数在原点周围移动它。

 <!DOCTYPE html> 
< html>

< head>
< title> JavaScript SVG Animation< / title>
< meta http-equiv =“X-UA-Compatible”content =“IE = Edge”/> <! - 在生产中删除此行。 - >
< / head>

< body>
< svg width =“800px”height =“800px”viewBox =“0 0 800 800”>
< g transform =“translate(400,400)”> <! - 为动画方块创建笛卡尔坐标系(y轴翻转)。也就是说,将原点放置在800 x 800 SVG视口的中心: - >

<! - 200 x 200平方,左上角为(-100,-100)。这将方形
的中心放置在原点(0,0)处: - >
style = “fill:yellow; stroke:yellow; stroke-width:1; stroke-dasharray:10,5;” />

<! - 表示x轴: - >

<! - 代表y轴(虽然上升为负值而下跌为正值): - >
< 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>
“使用严格”;

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

本文地址:IT屋 » 如何在SVG旋转期间保持文本方向不变

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起
}