rotation 相关问题

我想以不同的角度在 SVG 上写文本并翻转（如果角度 > 90 和 < 270 degrees to get text oriented for better readable). 我想在 SVG 上以不同的角度书写文本并翻转（如果角度 > 90 并且 < 270 degrees to get text oriented for better readable). <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" > <circle cx="323" cy="422" r="153" fill="none" stroke="#900" stroke-width="0.38"/> <circle cx="323" cy="422" r="228" fill="none" stroke="#900" stroke-width="0.38"/> <g id="E.3011.40-debug" class="units" font-size="10.0" fill="#000"> <line title="0" x1="323" y1="422" x2="477" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="477" y="422" style="">way +1 0° 0° </text> <line title="15" x1="323" y1="422" x2="472" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="472" y="462" style="transform-box:fill-box;rotate:15deg;">way +1 0° 15° </text> <line title="30" x1="323" y1="422" x2="456" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="456" y="499" style="transform-box:fill-box;rotate:30deg;">way +1 0° 30° </text> <line title="45" x1="323" y1="422" x2="432" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="432" y="531" style="transform-box:fill-box;rotate:45deg;">way +1 0° 45° </text> <line title="60" x1="323" y1="422" x2="400" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="400" y="555" style="transform-box:fill-box;rotate:60deg;">way +1 0° 60° </text> <line title="75" x1="323" y1="422" x2="363" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="363" y="571" style="transform-box:fill-box;rotate:75deg;">way +1 0° 75° </text> <line title="90" x1="323" y1="422" x2="323" y2="576" stroke="#900" stroke-width="0.38"></line> <text x="323" y="576" style="transform-box:fill-box;rotate:90deg;">way +1 0° 90° </text> <line title="105" x1="323" y1="422" x2="283" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="283" y="571" style="transform-box:fill-box;rotate:105deg;">way +1 0° 105° </text> <line title="120" x1="323" y1="422" x2="246" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="246" y="555" style="transform-box:fill-box;rotate:120deg;">way +1 0° 120° </text> <line title="135" x1="323" y1="422" x2="215" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="215" y="531" style="transform-box:fill-box;rotate:135deg;">way +1 0° 135° </text> <line title="150" x1="323" y1="422" x2="190" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="190" y="499" style="transform-box:fill-box;rotate:150deg;">way +1 0° 150° </text> <line title="165" x1="323" y1="422" x2="175" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="175" y="462" style="transform-box:fill-box;rotate:165deg;">way +1 0° 165° </text> <line title="180" x1="323" y1="422" x2="170" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="170" y="422" style="transform-box:fill-box;rotate:180deg;">way +1 0° 180° </text> <line title="195" x1="323" y1="422" x2="175" y2="383" stroke="#900" stroke-width="0.38"></line> <text x="175" y="383" style="transform-box:fill-box;rotate:195deg;">way +1 0° 195° </text> <line title="210" x1="323" y1="422" x2="190" y2="346" stroke="#900" stroke-width="1"></line> <text x="190" y="346" style="transform-box:fill-box;rotate:210deg;transform:scale(-1,-1);">way +1 0° 210° </text> <line title="225" x1="323" y1="422" x2="215" y2="314" stroke="#900" stroke-width="0.38"></line> <text x="215" y="314" style="transform-box:fill-box;rotate:225deg;">way +1 0° 225° </text> <line title="240" x1="323" y1="422" x2="246" y2="289" stroke="#900" stroke-width="0.38"></line> <text x="246" y="289" style="transform-box:fill-box;rotate:240deg;">way +1 0° 240° </text> <line title="255" x1="323" y1="422" x2="283" y2="274" stroke="#900" stroke-width="0.38"></line> <text x="283" y="274" style="transform-box:fill-box;rotate:255deg;">way +1 0° 255° </text> </g> </svg> jsfiddle 为此，我生成了一个演示 SVG，其中包含一些线条和不同角度的文本，如您所见，文本没有很好地对齐，除了 90 度（显然，在文本基线上正确对齐）。我还尝试使用“transform:scale(-1,-1);”将文本翻转 210 度得到意想不到的结果。尽管我尝试了属性“alignment-baseline”和“text-anchor”的多种组合，但我得到的结果最差，我怎样才能让文本正确对齐？正如 enxaneta 所评论的那样，您可以利用 SVG 的变换函数 rotate(angle x y)，因为它允许将变换原点指定为 2. 和 3. 参数。这里有一个 JS 小助手，可以将您的 css 转换转换为属性： let texts = document.querySelectorAll('text'); texts.forEach(text => { let angle = text.style.rotate ? parseFloat(text.style.rotate) : 0; // change rotation and text alignment for angles >90° if(angle>=90){ angle -=180; text.setAttribute('text-anchor', `end`) } let [x, y] = [+text.getAttribute('x'), +text.getAttribute('y')]; // set svg transform attribute text.setAttribute('transform', `rotate(${angle} ${x} ${y})`) text.style.removeProperty('transform-box') text.style.removeProperty('rotate') }) 很可能，您正在动态生成图表 - 因此您可以调整脚本以替换当前的转换属性。 let texts = document.querySelectorAll('text'); texts.forEach(text => { let angle = text.style.rotate ? parseFloat(text.style.rotate) : 0; // change rotation and text alignment for angles >90° if(angle>=90){ angle -=180; text.setAttribute('text-anchor', `end`) } let [x, y] = [+text.getAttribute('x'), +text.getAttribute('y')]; // set svg transform attribute text.setAttribute('transform', `rotate(${angle} ${x} ${y})`) text.style.removeProperty('transform-box') text.style.removeProperty('rotate') }) <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <circle cx="323" cy="422" r="153" fill="none" stroke="#900" stroke-width="0.38" /> <circle cx="323" cy="422" r="228" fill="none" stroke="#900" stroke-width="0.38" /> <g id="E.3011.40-debug" class="units" font-size="10.0" fill="#000"> <line title="0" x1="323" y1="422" x2="477" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="477" y="422" style="">way +1 0° 0° </text> <line title="15" x1="323" y1="422" x2="472" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="472" y="462" style="transform-box:fill-box;rotate:15deg;">way +1 0° 15° </text> <line title="30" x1="323" y1="422" x2="456" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="456" y="499" style="transform-box:fill-box;rotate:30deg;">way +1 0° 30° </text> <line title="45" x1="323" y1="422" x2="432" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="432" y="531" style="transform-box:fill-box;rotate:45deg;">way +1 0° 45° </text> <line title="60" x1="323" y1="422" x2="400" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="400" y="555" style="transform-box:fill-box;rotate:60deg;">way +1 0° 60° </text> <line title="75" x1="323" y1="422" x2="363" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="363" y="571" style="transform-box:fill-box;rotate:75deg;">way +1 0° 75° </text> <line title="90" x1="323" y1="422" x2="323" y2="576" stroke="#900" stroke-width="0.38"></line> <text x="323" y="576" style="transform-box:fill-box;rotate:90deg;">way +1 0° 90° </text> <line title="105" x1="323" y1="422" x2="283" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="283" y="571" style="transform-box:fill-box;rotate:105deg;">way +1 0° 105° </text> <line title="120" x1="323" y1="422" x2="246" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="246" y="555" style="transform-box:fill-box;rotate:120deg;">way +1 0° 120° </text> <line title="135" x1="323" y1="422" x2="215" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="215" y="531" style="transform-box:fill-box;rotate:135deg;">way +1 0° 135° </text> <line title="150" x1="323" y1="422" x2="190" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="190" y="499" style="transform-box:fill-box;rotate:150deg;">way +1 0° 150° </text> <line title="165" x1="323" y1="422" x2="175" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="175" y="462" style="transform-box:fill-box;rotate:165deg;">way +1 0° 165° </text> <line title="180" x1="323" y1="422" x2="170" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="170" y="422" style="transform-box:fill-box;rotate:180deg;">way +1 0° 180° </text> <line title="195" x1="323" y1="422" x2="175" y2="383" stroke="#900" stroke-width="0.38"></line> <text x="175" y="383" style="transform-box:fill-box;rotate:195deg;">way +1 0° 195° </text> <line title="210" x1="323" y1="422" x2="190" y2="346" stroke="#900" stroke-width="1"></line> <text x="190" y="346" style="transform-box:fill-box;rotate:210deg;transform:scale(-1,-1);">way +1 0° 210° </text> <line title="225" x1="323" y1="422" x2="215" y2="314" stroke="#900" stroke-width="0.38"></line> <text x="215" y="314" style="transform-box:fill-box;rotate:225deg;">way +1 0° 225° </text> <line title="240" x1="323" y1="422" x2="246" y2="289" stroke="#900" stroke-width="0.38"></line> <text x="246" y="289" style="transform-box:fill-box;rotate:240deg;">way +1 0° 240° </text> <line title="255" x1="323" y1="422" x2="283" y2="274" stroke="#900" stroke-width="0.38"></line> <text x="283" y="274" style="transform-box:fill-box;rotate:255deg;">way +1 0° 255° </text> </g> </svg> 使用 SVG 的 rotate() 功能的另一个好处是即使在功能较弱的 svg 应用程序中也支持它：许多图形编辑器只有有限的 CSS 功能 - 特别是关于转换属性，如 transform-box 或 transform-origin. 如果您更喜欢使用 CSS 转换，您可以通过应用两个 translate() 值来模拟 SVG 的轴心点旋转： text.style.transform = `translate(${x}px, ${y}px) rotate(${angle}deg) translate(${-x}px, ${-y}px)`; let texts = document.querySelectorAll('text'); texts.forEach(text => { let angle = text.style.rotate ? parseFloat(text.style.rotate) : 0; let [x, y] = [+text.getAttribute('x'), +text.getAttribute('y')]; // change rotation and text alignment for angles >90° if (angle >= 90) { angle -= 180; text.setAttribute('text-anchor', `end`) } // use css transform text.style.transform = `translate(${x}px, ${y}px) rotate(${angle}deg) translate(${-x}px, ${-y}px)`; text.style.removeProperty('transform-box') text.style.removeProperty('rotate') }) <svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"> <circle cx="323" cy="422" r="153" fill="none" stroke="#900" stroke-width="0.38" /> <circle cx="323" cy="422" r="228" fill="none" stroke="#900" stroke-width="0.38" /> <g id="E.3011.40-debug" class="units" font-size="10.0" fill="#000"> <line title="0" x1="323" y1="422" x2="477" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="477" y="422" style="">way +1 0° 0° </text> <line title="15" x1="323" y1="422" x2="472" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="472" y="462" style="transform-box:fill-box;rotate:15deg;">way +1 0° 15° </text> <line title="30" x1="323" y1="422" x2="456" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="456" y="499" style="transform-box:fill-box;rotate:30deg;">way +1 0° 30° </text> <line title="45" x1="323" y1="422" x2="432" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="432" y="531" style="transform-box:fill-box;rotate:45deg;">way +1 0° 45° </text> <line title="60" x1="323" y1="422" x2="400" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="400" y="555" style="transform-box:fill-box;rotate:60deg;">way +1 0° 60° </text> <line title="75" x1="323" y1="422" x2="363" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="363" y="571" style="transform-box:fill-box;rotate:75deg;">way +1 0° 75° </text> <line title="90" x1="323" y1="422" x2="323" y2="576" stroke="#900" stroke-width="0.38"></line> <text x="323" y="576" style="transform-box:fill-box;rotate:90deg;">way +1 0° 90° </text> <line title="105" x1="323" y1="422" x2="283" y2="571" stroke="#900" stroke-width="0.38"></line> <text x="283" y="571" style="transform-box:fill-box;rotate:105deg;">way +1 0° 105° </text> <line title="120" x1="323" y1="422" x2="246" y2="555" stroke="#900" stroke-width="0.38"></line> <text x="246" y="555" style="transform-box:fill-box;rotate:120deg;">way +1 0° 120° </text> <line title="135" x1="323" y1="422" x2="215" y2="531" stroke="#900" stroke-width="0.38"></line> <text x="215" y="531" style="transform-box:fill-box;rotate:135deg;">way +1 0° 135° </text> <line title="150" x1="323" y1="422" x2="190" y2="499" stroke="#900" stroke-width="0.38"></line> <text x="190" y="499" style="transform-box:fill-box;rotate:150deg;">way +1 0° 150° </text> <line title="165" x1="323" y1="422" x2="175" y2="462" stroke="#900" stroke-width="0.38"></line> <text x="175" y="462" style="transform-box:fill-box;rotate:165deg;">way +1 0° 165° </text> <line title="180" x1="323" y1="422" x2="170" y2="422" stroke="#900" stroke-width="0.38"></line> <text x="170" y="422" style="transform-box:fill-box;rotate:180deg;">way +1 0° 180° </text> <line title="195" x1="323" y1="422" x2="175" y2="383" stroke="#900" stroke-width="0.38"></line> <text x="175" y="383" style="transform-box:fill-box;rotate:195deg;">way +1 0° 195° </text> <line title="210" x1="323" y1="422" x2="190" y2="346" stroke="#900" stroke-width="1"></line> <text x="190" y="346" style="transform-box:fill-box;rotate:210deg;transform:scale(-1,-1);">way +1 0° 210° </text> <line title="225" x1="323" y1="422" x2="215" y2="314" stroke="#900" stroke-width="0.38"></line> <text x="215" y="314" style="transform-box:fill-box;rotate:225deg;">way +1 0° 225° </text> <line title="240" x1="323" y1="422" x2="246" y2="289" stroke="#900" stroke-width="0.38"></line> <text x="246" y="289" style="transform-box:fill-box;rotate:240deg;">way +1 0° 240° </text> <line title="255" x1="323" y1="422" x2="283" y2="274" stroke="#900" stroke-width="0.38"></line> <text x="283" y="274" style="transform-box:fill-box;rotate:255deg;">way +1 0° 255° </text> </g> </svg>

svg text rotation

回答 1 投票 0

如何在 Qt C++ 中围绕不同的锚点正确旋转 QGraphicsItem

我正在处理具有两个锚点的自定义 QGraphicsItem，我希望能够在用户与这些锚点交互时围绕这些锚点旋转项目。我已经实现了一个 mousePressEv ...

c++ qt rotation qgraphicsview qgraphicsitem

回答 2 投票 0

我的 CSS Animation 无法解决这两个问题

我必须让一个 css 动画看起来和这个例子一模一样现在我在这两个方面遇到了主要问题： #1 - 我三角形的箭头需要保持指向 ci 的点...

html css animation rotation css-animations

回答 0 投票 0

如何根据基本事实计算角度值的 L1 和 L2 范数（其中角度值的周期为 -180 到 180）？

如何根据基本事实计算角度值的 L1 和 L2 范数（其中角度值具有 -180 度到 180 度的周期）？如果我有一组数据 ip_data[] 和一组地面 t...

math computer-vision rotation angle visual-odometry

回答 1 投票 0

如何使用度数输入围绕物体上下旋转 Unity 相机

给定一个输入角度，我想将面向目标对象的相机从自上而下的位置（在图像中：90 度）移动到底部平面，沿着像球面一样的曲线。在左边...

unity3d camera rotation

回答 0 投票 0

使用 Javascript 旋转 3D 对象

我可以用一根手指滑动来旋转 3d 对象 var curPos = undefined; var transform = script.getSceneObject().getTransform(); 变种速度= 10.0; script.createEvent("TouchStartEvent")...

javascript 3d rotation catransform3drotate

回答 0 投票 0

3D旋转接口的实现

我用 OpenGL 实现了一个接口，允许通过鼠标拖动来旋转场景。非常标准的行为，当你向上/向下拖动时，相机在球体上移动并旋转...

opengl rotation

回答 0 投票 0

找到两点之间的 Look At Rotation 的算法步骤是什么？

我想在一段时间内将 ObjectA 的旋转 SLERP 朝向 ObjectB 的位置。我正在进行的插值，我无法弄清楚的是如何产生 DestinationRotation（...

c++ rotation game-engine unreal-engine4 quaternions

回答 0 投票 0

旋转带有设置图标的 JLabel（java）

我有一个 JLabel，我已经为它设置了一个图标。我想通过单击一个按钮（我已经实现了 KeyListener 接口）逐渐旋转标签（并将图像设置为标签）。有没有...