如何旋转SVG路径元素而不使其在圆圈中移动？
要实现旋转SVG路径元素而不使其在圆圈中移动，可以使用SVG的transform属性来实现。具体的步骤如下：
- 首先，确保SVG路径元素是放置在一个圆形容器内部，也就是一个包围元素。这可以通过使用SVG的<g>元素来创建一个容器，并将路径元素放置在其中。
<svg>
<g>
<circle cx="100" cy="100" r="50" fill="none" stroke="black"/>
<path d="M100 50 A 50 50 0 0 1 150 100" fill="none" stroke="red"/>
</g>
</svg>- 接下来，使用SVG的transform属性来旋转路径元素。可以使用rotate()函数指定旋转的角度以及旋转的中心点坐标。
<svg>
<g>
<circle cx="100" cy="100" r="50" fill="none" stroke="black"/>
<path d="M100 50 A 50 50 0 0 1 150 100" fill="none" stroke="red" transform="rotate(45 100 100)"/>
</g>
</svg>在上述代码中，rotate(45 100 100)表示将路径元素顺时针旋转45度，以圆心坐标(100, 100)为旋转中心。
- 如果想要实现路径元素自动旋转，可以使用CSS的动画来实现。将旋转动画定义在路径元素上，并使用animation属性指定动画名称、持续时间和重复次数。
<svg>
<g>
<circle cx="100" cy="100" r="50" fill="none" stroke="black"/>
<path d="M100 50 A 50 50 0 0 1 150 100" fill="none" stroke="red" transform="rotate(0 100 100)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="5s" repeatCount="indefinite"/>
</path>
</g>
</svg>在上述代码中，使用了animateTransform元素来创建路径元素的旋转动画。from属性指定了起始角度和旋转中心，to属性指定了结束角度和旋转中心，dur属性指定了动画的持续时间，repeatCount属性指定了动画的重复次数。
这样就可以实现旋转SVG路径元素而不使其在圆圈中移动了。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有一个有3个路径的SVG，但只需要它们连续旋转。这在只有一条路径的SVG上工作得很好，但不适用于这条路径，我还得到了一些我想要在固定位置上旋转的其他路径。
浏览 14提问于2021-02-10得票数 0
2回答
SVG行程的旋转破折号
、、、、
我期待动画的旋转的个人破折号的SVG stroke-dasharray，谁知道如何，考虑到这是可能的？我意识到我可以用CSS的transform:rotate()旋转SVG元素的整个对象，但是有任何方法可以旋转单个破折号吗？我还意识到，我可以使用单个元素重新创建它，并旋转这些元素，但出于性能和简洁的原因，这并不是我想要做的。
，如果你想要的话。我希望广场保持直立的位置，而不是旋转，
浏览 6提问于2014-03-01得票数 2
回答已采纳
我在SVG中的g元素中有一个圆。G元素可以根据x坐标简单地移动。G元素的位置会随着它的移动而改变。圆也是在g元素中移动的。我的问题是，如何才能恢复该圆圈在SVG中的位置，而不是它在g元素中的位置？transform(d3.select(this).attr("transform")).translate;
浏览 2提问于2015-04-14得票数 1
回答已采纳
1回答
djvanderlaan的d3.js 首先在SVG区域的中心定义了一个"sun“圈：.attr("{ R: 300, r: 5, speed: 5, phi0: 90},];
var container = svg.append然而，这些圆圈以
浏览 0提问于2014-09-23得票数 0
回答已采纳
2回答
我希望在circle svg元素上创建一个简单的脉冲动画。我使用的是transform: scale(..,..)动画，但出于某种原因，它正在其容器中移动整个圆圈，而不是简单地缩放元素本身。opacity: 1.0;}}
对于如何创造这种效果圆圈可能位于sv
浏览 3提问于2015-12-17得票数 5
回答已采纳
可以不剪裁svg路径而旋转它吗？我知道我可以增加容器的大小，但我不想这样做。我试图以与路径相同的角度旋转svg容器，但它不起作用。这是我的基本svg设置：<svg x = {10} y = {10} height= {40} width = {
浏览 17提问于2022-06-20得票数 2
2回答
圆圈上的百分比动画
、、、
我有一个代码，它将百分比显示为圆圈。能不能做点什么让动画从上面开始，从右边开始，而不是像现在这样，从右边开始。有可能绕过这条线吗？还有其他更好的代码来做这样的事情吗？circumference - percent / 100 * circumference;}<svg"progress-ring__circle" stroke="#000" stroke-widt
浏览 1提问于2020-04-25得票数 1
回答已采纳
1回答
a.group();a.add(group);var a = Snap("#id");
s.circle(5,5,5);
它工作，圆圈被呈现，但是我不能移动组：实际上，当我们将和<svg
浏览 3提问于2013-12-09得票数 0
回答已采纳
3回答
，其内容为： <path d="M2 7v2h6c.6 0 1-.5rotate"/> <circle cx="8" cy="8" fill="none"
浏览 3提问于2014-09-13得票数 1
回答已采纳
我已经完成了一个Raphael.js图像，它由一组圆圈组成，如下所示var circle1 = paper.circ(20,20,10);我还有一个拉斐尔格式的svg图标(感谢可爱的网站)，我想把它放在每个圆圈里。转换后的svg图标中的所有路径现在都是相对于点(0,0)！也就是说，所有的字符串都是这样写的
paper.path('M 1 1 L 2 0
浏览 3提问于2012-10-15得票数 1
回答已采纳
2回答
SVG绕轴点旋转泪滴形状
、、、
我试图在一张带有SVG图标的传单地图上显示一堆气象站。现在我只是想弄清楚绘画部分。
在下面的例子中，数字应该保持在圆圈的中间。
var svg =
浏览 3提问于2017-01-18得票数 1
回答已采纳
2回答
如果我将(100，0)的转换应用到SVG路径，则它将左移100 by。但是如果我首先旋转路径，那么平移就会沿着对角线发生。我知道一种解决方案是将转换后的路径放入一个group元素中，然后将第二个转换应用到该组中。但是，如果可能的话，我想避免创建组元素</e
浏览 5提问于2015-05-24得票数 0
回答已采纳
1回答
我正在使用Snap.svg制作动画。我现在有两个元素(一个圆圈和一个椭圆)要画。这些元素一起平移，椭圆也会旋转和改变形状。我可以使用Element.animate()函数在Snap.svg中动画每个元素，但它是非常棘手的，以保持它们的和谐转换。那么，我怎样才能把这些元素作为一个整体来动画呢？html片段放在上。PS:属性cx和cy的centroid不更新后，每个动画帧。我希望他们会被改变。
谢谢你的帮助！
浏览 1提问于2013-12-25得票数 0
回答已采纳
1回答
我读过关于svg动画的文档，我知道如何动画矩形、圆圈等，但是这个文档不包含任何关于如何动画整个svg "path“元素的信息。在下面的代码中，我想将第二个"path“元素动画到右边.<svg width=&quo
浏览 3提问于2014-09-28得票数 1
回答已采纳
stroke-dashoffset: 0; to { stroke-dashoffset: 50; }<svg></svg>
浏览 2提问于2022-06-02得票数 0
1回答
我正在尝试为我的应用程序创建一个带有几个圆圈图标的菜单。用户应该能够旋转此菜单，使图标改变其在此圆路径周围的位置，但不旋转自己。我之前读过这篇，所以我可以看到如何跟随手指的移动，但我需要这个菜单在触摸结束后有惯性旋转。关于如何做到这一点，我有两个问题。其次，
浏览 0提问于2013-04-23得票数 3
回答已采纳
1回答
简而言之，我希望无论圆圈移动到哪里，都会有一个文本伴随着他。我有一个与此类似的代码： <svg width="100%" height="100%"><circle cx="50%" cy="6%" r="7%" [ngStyle]="{'fill':circleDegrees + 'deg)', 'transform-origin': 'c
浏览 17提问于2020-06-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
