如何为多边形设置动画以使用SVG就地旋转？

文章/答案/技术大牛

发布

1回答

html、svg

我有一个8边的多边形，我想用文本在它的中心轴上顺时针旋转。查看MDN web文档显示了一个简单的三角形旋转，但当我将其应用于多边形时，它并不是很有效。 <polygon 25,105dur="10s"

浏览 22提问于2020-02-17得票数 0

回答已采纳

1回答

我有一个动画，平面上的点被多边形()动态封装。我使用路径SVG来绘制多边形，但是，我注意到，随着点在平面上的转换，并且被添加到/移除多边形的周长，整个多边形将在其过渡期间旋转以进行调整，这看起来很混乱，造成了很差的可视化效果。我可以看到，许多示例()涉及到在发生事件时用新数据重绘(而不是转换)整个路径SVG。我想知道是否有任何方法可以按设定的间隔重新绘制路径，例如每隔x毫秒绘制一次，或者每次转换点时都重新绘

浏览 5提问于2015-09-23得票数 1

1回答

CSS变换- SVG上的原点始终为(0,0)

css、animation、svg、transformation、css-transforms

我想让每个多边形/组以动画的形式出现。我希望它是Y轴上的旋转，旋转的原点是最左边顶点的Y轴(想象一张扑克牌在左边靠在桌子上，从垂直到扁平)。但是，根据this Fiddle，变换的原点始终是Y轴，但始终使用x=0作为旋转的原点，即使我使用最左边的顶点作为变换原点。奖励:在初始旋转后，我想等待1秒，然后进行另一次旋转，以最右侧顶点的Y轴为原点使其消失(0到-90度)。 width=&quo

浏览 60提问于2019-02-25得票数 0

回答已采纳

1回答

旋转平面中的旋转模糊元素在铬中部分模糊

css、3d、rotation、blur、clip-path

我想要一个模糊的多边形(比如一个简单的三角形)在一个三维旋转的平面上旋转。要获得多边形，我使用clip-path，但是由于filter是在clip-path之前应用的，所以我使用伪元素来获得实际的多边形形状。所有的一切都是好的，直到我把模糊，旋转的动画我

浏览 2提问于2017-12-25得票数 2

1回答

如何在owl-旋转木马中重置SVG动画

javascript、html、svg、owl-carousel、owl-carousel-2

我有svg动画，就像这样xmlns:xlink='http://www.w3.org/1999{display: none;}css主要用于设置类active时显示s

浏览 0提问于2018-11-19得票数 0

回答已采纳

4回答

SVG动画在IE11上不起作用

css、animation、svg、internet-explorer-11

我有一个非常简单的加载动画，可以在火狐和Chrome上完美地工作，但在IE11中它不能显示SVG图形。下面是完整的示例：<svg class="circular-loader" viewBox="25 25 50 50"> <circle class="loader-path" cx="50" cy="50" r="20" fill="none" st

浏览 0提问于2015-11-20得票数 30

2回答

使用Snap.svg在动画图标上的奇怪行为

svg、snap.svg

我正在尝试用Snap.svg制作一个搜索图标的动画。您可以看到该，即搜索图标。我使用变换比例让我的图标在每次点击时“弹跳”：loupe.animate({transform: 's1.2s.8'},300,mina.easeout); 动画运行良好，除了在第一次点击，它只是缩小，与刷新图标(在笔的底部)的行为相同，旋转动画在第一次单击时会以错误的方式旋转，尽管我在动画之前重置了变换。我猜可能是我的图标在第一次点击之

浏览 1提问于2015-08-28得票数 0

1回答

沿路径动画svg路径和多边形

css、animation、svg

我有一个SVG箭头，它由一个路径和一个多边形组成。我想要动画的路径和多边形沿路径。但是，我不知道如何以同样的速度沿着路径移动多边

浏览 4提问于2022-06-08得票数 1

1回答

如何将动画的svg替换为只绘制多边形的svg

svg、svg-animate

我确信，对于一个熟悉svg的人来说，这是一个简单的问题，然而，这不是我的问题，我正在转换一个使用svg的现有程序，并且无法访问原始的程序员。我有以下函数，它呈现一个多边形，每秒钟旋转一次。我希望它只是渲染原来的多边形和停止。如果完全删除animateTranform元素，则得到向量，但不设置为以度数表示的位置。我可以将to=行更改为只包含+0而不是+360，但这似乎很奇怪。

浏览 1提问于2021-12-28得票数 0

回答已采纳

1回答

如何从svg中移除转换？

javascript

所以我有const svg = e.target.parentElement; (针对内联svg及其周围的div (so <div><svg><path transform="rotate()"/></svg></div>))，然后在result.innerHTML =中有${svg.outerHTML}，但是当svg进入innerHTML (仅在innerHTML中)时，我希望

浏览 1提问于2019-07-11得票数 0

回答已采纳

2回答

原点使用react-native动画api的react-native-svg旋转的等价物是什么

react-native、animation、react-native-svg

我有下面的svg path，它在每个value状态成功改变时围绕原点旋转，其中值是某个度数的值： <Path rotation: this.state.value我想要实现的是，使用动画API对旋转进行动画处理，以实现更平滑的旋转。我已经尝试将我的value状态设置为Animated.Value。然后将Path设置为Animated.createAnimatedCo

浏览 25提问于2020-01-11得票数 1

回答已采纳

1回答

SVG路径希望它以循环方式呈现

javascript、css、svg

因为这是我尝试svg的唯一途径，但是它不能工作。 y="0px" width="131.45px" height="131.451px" viewBox="0 0 131.45 131.45121.9c33.925,1.752,60.5,30.606,60.5,65.69 C131.452,94.733,113.463,119.974,86.6

浏览 2提问于2019-09-09得票数 0

4回答

在弯曲的路径中移动div (就像Flash中的补间一样)？

javascript、jquery、html、canvas

只有使用Canvas才能做到吗？HTML5？你有什么建议的插件/脚本吗？

浏览 0提问于2011-12-09得票数 5

回答已采纳

4回答

使用CSS和SVG的钻石菜单项

css、svg、responsive-design、css-shapes

我想用HTML&CSS编写以下设计代码到目前为止我所做的是：我是用：单击查看SVG形状本身。

浏览 8提问于2014-10-24得票数 6

回答已采纳

3回答

如何在不增加容器<svg>高度/宽度的情况下旋转SVG路径？

html、css、reactjs、svg

可以不剪裁svg路径而旋转它吗？我知道我可以增加容器的大小，但我不想这样做。我试图以与路径相同的角度旋转svg容器，但它不起作用。这是我的基本svg设置：<svg x = {10} y = {10} height= {40} width = {100} viewBox = &qu

浏览 17提问于2022-06-20得票数 2

1回答

如何为文本添加动画，使其在使用SVG的文本路径时不旋转？

javascript、css、svg、css-transitions、smil

我试图使用SVG的文本路径实现的是，文本在跟随其动画路径时不旋转；因此，它在进行动画处理时保持水平，如下所示：默认情况下，文本在设置动画时会旋转到当前的路径角度，使文本看起来像这样：<svg> <

浏览 12提问于2016-09-16得票数 4

回答已采纳

1回答

CSS样式变换与svg变换

javascript、svg、responsive-design、css-animations、css-transforms

我认为SVG的很大一部分是可伸缩的因素。我知道如何非常好地使用SVG来扩展规模，并以许多不同的方式进行响应。通常，可以在SVG元素上设置viewbox，并根据屏幕的像素创建一个坐标系统。因此，所有的转换，平移，旋转，倾斜等将是相对于svg自己的坐标系。我认为，在翻译等方面，这应该比使用css动画更有优势，因为您必须使用像素等度量单位，我认为这会导致各种分辨率屏幕上的不正确翻译，或者调整浏览器窗口的大小。能否有人向我解

浏览 1提问于2016-01-20得票数 5

回答已采纳

2回答

在纯CSS中使用内联SVG而不是字体可怕的CSS字体。

html、css

我正在使用-based模板作为静态站点生成器，并且我希望删除对Javascript和第三方托管的任何资源的依赖，并且通常将事情最小化。模板使用来处理一些图标，但实际上只有5-10个图标，所以我计划将它们内联为SVG，而不是加载整个web字体。但是，我不知道如何通过纯CSS尽可能接近替换这几个图标。但是，如果我使用内联SVG (请参阅)，那么这个CSS： content: ''; heigh

浏览 1提问于2018-02-09得票数 3

1回答

用SVG和d3展开圆，把它转换成一条线

svg、d3.js

在这个中，我有一个静态的SVG (上圆)，它沿着在HTML中定义的线性黑色路径(在圆圈上方，以模仿手指扩展)旋转。在静态循环中，平移是一种动画，旋转是另一种，它们只是有相同的恒星和持续时间，所以它们一起动画。您将如何在d3中应用这两种方法？这些似乎更好：或者考虑一条八角形(定义为一条路径)，如果它旋转7条边，那么6条，然后5条.对多面体上相当多的点这

浏览 1提问于2013-04-23得票数 3

回答已采纳

2回答

IPhone2.5D游戏中移动顶点导致的quartz 2d / openGl / cocos2d图像失真

iphone、opengl-es、cocos2d-iphone

我们正试图在iphone游戏中实现以下目标：使用2d png文件，设置一个看起来像3d的场景。当用户移动设备时，单个png文件将相应地扭曲/扭曲，以提供深度效果。我们已经使用skew和scale等本机函数成功地实现了这一点。通过对不同的墙壁和椅子应用变换，当设备倾斜移动时，墙壁将倾斜/缩放/平移。然而，问题是因为我们使用的是6个png文件，当我们移动设备时，边缘不会相交。我们需要一个使用真正引擎的新解决方案。

浏览 0提问于2011-02-16得票数 1

点击加载更多