使用css动画从中心缩放svg
使用 CSS 动画从中心缩放 SVG 可以通过 CSS 的 @keyframes 和 transform 属性来实现。下面是一个完善且全面的答案：
SVG（可缩放矢量图形）是一种基于 XML 的矢量图形格式，用于描述二维图形和图像。CSS（层叠样式表）是一种用于描述网页上元素外观和布局的样式语言。
中心缩放 SVG 可以使用 CSS 动画结合 @keyframes 和 transform 属性来实现。具体步骤如下：
- 创建一个 SVG 元素，可以使用
<svg>标签来定义。 - 定义一个 CSS 类来应用样式和动画效果。
- 在 CSS 类中，使用
@keyframes来定义动画的关键帧。可以使用百分比来表示动画的进度，例如0%表示动画的开始，100%表示动画的结束。 - 在
@keyframes中，使用transform: scale()属性来实现缩放效果。通过指定不同的缩放比例，可以实现不同的动画效果。 - 将动画应用到 SVG 元素上，可以使用
animation属性来设置动画的名称、时长、延迟、重复等。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.zoom-svg {
animation: zoom 2s infinite;
}
@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<svg class="zoom-svg" width="200" height="200">
<!-- 在这里定义你的 SVG 图形 -->
</svg>
</body>
</html>在上述示例中，定义了一个名为 .zoom-svg 的 CSS 类，通过 animation 属性将 zoom 动画应用到 SVG 元素上。zoom 动画定义了三个关键帧，分别在动画开始、中间和结束时设置不同的缩放比例。
这个动画将使 SVG 元素在 2 秒的时间内从初始大小开始缩放到两倍大小，然后再缩放回初始大小，循环无限次。
如果你想了解更多关于 SVG 和 CSS 动画的内容，可以参考腾讯云的相关产品和文档：
- SVG：SVG 是一种基于 XML 的矢量图形格式，腾讯云没有特定的 SVG 相关产品，但你可以使用 SVG 在网页上显示矢量图形。了解更多关于 SVG 的信息，可以参考 SVG - Scalable Vector Graphics。
- CSS 动画：CSS 动画是通过 CSS 属性来实现元素动画效果的技术。腾讯云没有特定的 CSS 动画产品，但你可以在腾讯云的网站或应用中使用 CSS 动画来提升用户体验。了解更多关于 CSS 动画的信息，可以参考 CSS Animations。
希望以上回答能满足你的需求。如果你还有任何问题，请随时提问。
相关·内容
1回答
我想要转换:将一个SVG组转换成一个latLng像素位置，并在缩放后保持该位置。.});
我试着查看来源，看看传单标记是如何重新定位的，因为这本质上是我试图模仿的行为，但没有效果。
浏览 3提问于2015-01-23得票数 2
回答已采纳
1回答
我读了几篇关于从中心缩放SVG路径的文章，但都不起作用。 { } <svgwidth="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http:
浏览 28提问于2019-08-23得票数 0
回答已采纳
2回答
这是我想要的效果的一个例子：
我希望将元素(不仅仅是图像)缩放到中心，并使用一个动画缩放元素从其位置缩放到页面的中心。动画应该是基于css的，JS不应该用于动画目的。我尝试了下面的代码，它不能完成这项工作：使用css</
浏览 3提问于2018-08-23得票数 3
1回答
我有一个svg国家地图，当你点击一个区域，然后看到一个相对于选定区域的动画缩放，即在一个点击区域的中心有transform-origin点的缩放时，我试图达到这个效果。我更希望不要使用任何库。首先，为什么，当我们设置svg viewBox属性时，使用getBoundingClientRect()点绘制的polygon不匹配它们的实际元素svg、map、e.target
如果我们添加一些像这样的系数如果我试图通过添加以下内容来更改v
浏览 1提问于2016-04-12得票数 1
回答已采纳
1回答
SVG从中心缩放
、、、、
我一直在尝试在我的网站上缩放我的徽标，这样它就可以填充背景。这个想法是，整个浏览器视区应该“潜入”到徽标的中心。为此，我制作了一个标识的SVG文件，并在我的网站中包含了jQuery SVG。我已经开始掌握jQuery SVG动画的诀窍了，但是我不能让整个东西从中心开始缩放。在研究的过程中，我突然想到了一个想法，那就是人们应该随着SVG的缩放而转换它，但我还没有完全弄清楚算法或如何将其与jQuery动画</em
浏览 3提问于2012-07-19得票数 1
回答已采纳
我想通过旋转它的中心来动画我的SVG，但是由于SVG的大小不同，中心点的变化取决于它在我的网页中使用的位置。这是我的SVG：<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox我
浏览 3提问于2017-08-09得票数 1
回答已采纳
1回答
我在尝试缩放子元素时遇到了关于转换原点的问题。 在尝试缩放较大svg中的长方体动画时，它使用来自整个svg的变换原点(0,0)，而不是我试图缩放的元素的中心。这使得它看起来像是“从左上角飞进来”，这不是我想要的。我正在寻找使它从元素中心的规模。 如何在不硬编码子元素本身的(x，y)位置的情况下，相对于我正在制作动画的特定元素设置转换原点。scale(0);}
to {transform: sca
浏览 21提问于2019-05-22得票数 2
回答已采纳
1回答
我们一直在使用SVG路径动画( SMIL )，因为CSS非常有限，现在已经听说SMIL将很快从所有浏览器中消失。有没有人知道WebAnimations是否会支持矢量形状动画，而不仅仅是经典的位置/旋转/缩放动画？
浏览 1提问于2016-03-14得票数 0
回答已采纳
2回答
我经常使用viewBox属性“缩放”SVG元素。当然，缩放是通过对viewBox属性使用较低的宽度和高度值来完成的，但是x和y值很难确定以保持场景为中心。场景是缩放，从左上角开始。 </body>减半宽度和高度是不一致的viewBox="12.5 12.5 25 25"应该继续<em
浏览 6提问于2017-08-18得票数 7
回答已采纳
1回答
我想旋转一个嵌套的SVG元素(一条折线)围绕它的中心，而不是(0,0)。旋转是动画(转换)，因为我想用样式触发它，所以我编写了一个“standart”CSS转换(我的意思是它不是SVG动画，我想它也是一样的吗?)另一件事: SVG被容器调整了大小，它是viewBox属性，如您所见： <svg version="1.1" id="svgh
浏览 2提问于2015-10-17得票数 1
回答已采纳
2回答
我想缩放一个SVG元素，以适应(保持高宽比)一个给定的SVG区域。我知道动画会执行相关的动画原则上，应该可以通过计算转换和缩放的参数来实现我想要的结果。t的参数似乎是相对的x，y位置，而s的参数是标度因子和尺度中心的坐标。然而，组合翻译和缩放是如何工作的呢？相对平移位置与标度等是否成比例？换句话说:如何从动画目标元素的左上角和右下角的坐标计
浏览 3提问于2016-04-02得票数 0
回答已采纳
3回答
我正在编写一个使用SVG显示信息的跨平台web应用程序。我需要有一个多点触摸界面来平移和缩放SVG图形。从我的研究来看，Hammer.js似乎是我最好的方法，而且我使用的是jQuery库版本。我可以使用SVG的viewBox属性平移和缩放图像。我遇到的问题是在收缩缩放时使用中心点信息(而不是从左上角缩放)。那个中心点，在我的图像
浏览 1提问于2013-08-16得票数 4
我正在使用svg - svg zoom代码来制作某种类型的svg地图，现在是时候在单击事件时添加一个功能来平移和缩放到svg的艺术组件了。但是，我不确定如何使用panBy()函数来获得所需的svg艺术项目:我尝试在我希望平移到的组上使用getBBox()，并将其与panZoomInstance.getPan()和getSizes()信息一起使用我想要完成与他们的示例()相同的动画，但将视区居中到项目
浏览 5提问于2018-08-26得票数 3
回答已采纳
1回答
我正在尝试使用SVG中的缩放动画将圆从1px半径扩展到20px半径。当前的半径是1px，我正在尝试将其缩放到20倍。问题是，每当我尝试运行代码时，1px点就会对角地向上和向左移动，然后突然移动到SVG的外侧。我尝试过在atributeName="r"和atributeName="transform" type="scale"中使用atributeType="xml"
这是整
浏览 1提问于2019-04-29得票数 1
2回答
CSS动画每秒钟重复一次
、、、
我当前正在动画一个svg元素，如下所示.r1 { transform-origin: 50% 50%; } transform: rotateX(359deg); }
<svgid="Layer_1" data-name="Layer 1" xmlns="
浏览 16提问于2022-02-11得票数 0
回答已采纳
我们有一个用JavaScript生成的SVG网格。I可以动画的缩放级别，但不能顺利地动画X和Y坐标转换很好。script>
<script id="main" src
浏览 0提问于2017-09-05得票数 0
回答已采纳
2回答
这个序列能在HTML5中完成吗？
、、、、
I还没有机会使用HTML5。对于这种类型的动画，KineticJS库看起来也很有希望，但我将把这些建议留给各位。
浏览 4提问于2014-02-24得票数 1
1回答
在我的css文档中有一个链接("a“标签)，并且我有一个从链接的中心到两端缩放底部边框的动画。我希望动画从左侧缩放到右侧 我试着对它使用了从负面到正面的翻译，但看起来并不像我想要的那样。transform: scaleX(0);}{}
浏览 8提问于2018-12-31得票数 0
1回答
我被困在调整svg动画大小到页面的不同百分比。我创建了一个圆圈，它的大小增加了，然后又回到了正常的状态：<circle我尝试使用CSS缩放动画，将大小以像素为单位，然后以百分比为单位将一个区域分配给<em
浏览 0提问于2015-02-05得票数 1
1回答
我有一个SVG元素，我正在使用CSS3来动画。我在SVG中缩放(transform: scale())元素，但是它们在SVG图像的边界之外显示。为您的测试提供了一个
浏览 0提问于2014-07-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
