svg css动画会改变位置和大小，我只想让它改变大小
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以通过代码描述图形，而不是像位图那样基于像素。CSS动画是一种使用CSS属性和关键帧来创建动画效果的技术。
当使用CSS动画来改变SVG图形的大小时，可以通过设置transform属性中的scale来实现。scale函数可以通过指定一个水平和垂直的缩放比例来改变元素的大小。例如，transform: scale(2)将使元素的大小增加两倍。
如果只想让SVG图形改变大小而不改变位置，可以使用CSS的transform-origin属性来指定变换的原点。默认情况下，变换的原点是元素的中心点。通过设置transform-origin属性，可以将变换的原点设置为元素的某个特定位置，从而实现只改变大小而不改变位置的效果。
以下是一个示例代码，演示了如何使用CSS动画来改变SVG图形的大小：
<!DOCTYPE html>
<html>
<head>
<style>
.svg-container {
width: 200px;
height: 200px;
}
.svg-container svg {
width: 100%;
height: 100%;
}
.svg-container svg rect {
fill: blue;
transform-origin: center;
animation: scaleAnimation 2s infinite alternate;
}
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
</style>
</head>
<body>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" />
</svg>
</div>
</body>
</html>在上面的示例中，我们创建了一个包含一个矩形的SVG图形，并使用CSS动画来将矩形的大小从原始大小（1倍）变为两倍。通过设置transform-origin: center，我们将变换的原点设置为矩形的中心点，从而实现只改变大小而不改变位置的效果。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。您可以根据具体的需求选择适合的产品来支持您的云计算应用。更多关于腾讯云产品的信息，您可以访问腾讯云官方网站：https://cloud.tencent.com/。
相关·内容
我想在svg中创建一个元素，以使我正在处理的动画变得越来越大和越来越小。我希望正方形的中心保持不变，同时它在Y方向上变大。<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG</e
浏览 19提问于2019-11-01得票数 0
1回答
我被困在调整svg动画大小到页面的不同百分比。我创建了一个圆圈，它的大小增加了，然后又回到了正常的状态：<circle>
然后，当我改变svg的
浏览 0提问于2015-02-05得票数 1
我想使用svg-动画来动画一个svg-文本元素的CSS属性。我可以让动画工作得很好，但是CSS的起始位置是默认样式，而不是第一个关键帧的样式。>
期望和期望的行为是svg-text元素最初呈现为100 0px，等待2秒，然后缩小到1秒内的0px。相反，svg-text元素最初呈现为默认字体大小(~14 0px )，等待2秒
浏览 1提问于2014-11-30得票数 0
回答已采纳
我想让我的WPF窗口具有动画效果。它被设置为内容的大小，所以当内容改变时，窗口的大小也会改变。我不希望它捕捉到一个新的大小，但当它确定它需要一个新的大小时，我希望它通过一个动画在旧的和新的值之间移动。 我该如何设置？编辑:我正在使用“Siz
浏览 20提问于2019-06-05得票数 5
我的productfilter上有一个加载动画(如页面所示)。如果您在左侧的过滤器中做出选择，您将看到动画。现在我想把它做小一点，但我不知道如何管理它。如果我改变宽度和高度等。它改变了svg的大小，但在网站上它仍然保持不变(不是缓存问题，因为颜色确实会改变)。任何帮助都是非常感谢的。Sjoerd
浏览 11提问于2017-07-13得票数 1
回答已采纳
1回答
我刚刚建立了一个基于CSS比例，模糊和位置转换的自定义滑块。不要专注于功能，，我只想让它更加流畅，。
如何处理动画: jQuery检查和更新位置，然后给每一张卡一个新的位置，模糊和</
浏览 3提问于2015-09-24得票数 0
回答已采纳
我对在不同尺寸的屏幕上使用css的新vh/vw感兴趣。或实际上，我想要的是两者都使用注意:我试过使用vmin，但也不太好。字体-根据窗口大
浏览 6提问于2014-10-23得票数 3
1回答
我有一个元素，当它的内容改变时，我想让它的宽度具有动画效果。它有width: auto，这一点永远不会改变。我见过，但它用于两个值之间的转换，并且设置了一个值。我根本没有操纵值，只有内容，我希望元素的大小随着动画的变化而改变。在CSS中这是可能的吗？font-family: Ionicons;
font-size: 80%;
浏览 12提问于2016-07-29得票数 27
回答已采纳
有没有办法使svg自动缩放到其内圆的大小？类似的东西什么的。现在，我给svg一个大小，给圆圈一个大小。这导致它们不匹配(而且我不想每次都手动尝试并匹配两者)。DOCTYPE ht
浏览 0提问于2018-02-20得票数 0
回答已采纳
7回答
我在谷歌地图中调整图标大小时遇到了问题。我有一个svg文件让它响应。这就是我调用svg文件的方式 url: 'greenFill.svg',};
属性:size不会改变我的图标的大小，而只是裁剪它。唯一的方法是改变</e
浏览 1提问于2014-04-24得票数 12
1回答
帆布拉伸而不是裁剪和开始位置
、、、、
我有一个帆布，里面有一些飘落的五彩纸屑，我用这个jquery改变了它的高度： $('#world')那是我的纸屑： var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle
浏览 1提问于2017-02-13得票数 1
回答已采纳
1回答
有没有办法使视图框适合任何给定浏览器的大小？例如，我现在使用的是1600x1900的浏览器，其视图框如下： <svg viewBox="-300 0 1920 995"> 我的页面就会滚动。我最初在1080p显示器上制作网页，页面不能滚动。
浏览 10提问于2019-04-30得票数 0
2回答
我正在尝试下面的场景。1.容器有一个嵌入的视图。2.一旦动画改变了嵌入视图的高度，3.动画改变后，容器的高度也会和嵌入视图的高度一样改变。我已经尝试过"translatesAutoresizingMaskIntoConstraints = false“
它起作用了..当改变嵌入视图的大小时，容器视图的大小也会改变。但是，容器高度在没有动画</em
浏览 1提问于2019-07-03得票数 0
1回答
当前站点：当我悬停在其中一个li元素上时，我想要一个次要的标题落在原来的标题下面(其中包含一些链接)。当我添加第二个div时，如何在不考虑大小的情况下直接将其对齐到主div下面？
编辑:如果你调整浏览器窗口的大小，标题就会改变它的大小。这就是我遇到麻烦的原因，我不能
浏览 4提问于2015-03-31得票数 0
回答已采纳
假设我加载了SVG，并在浏览器中显示了它，到目前为止还可以。 //.css('width',width+'px') .css('width&
浏览 9提问于2014-06-29得票数 3
回答已采纳
我使用的是jquery.parallax-scroll.js (J.P-S)，它依赖于window.requestAnimationFrame来做滚动动画。我的脚本动画元素在x轴和y轴上的移动，同时滚动以到达并重叠位于页面下某处的目标元素。 只要窗口不调整大小，它就能工作得很好。调整窗口大小时，两个元素的位置都会改变，但正在进行的动画的坐标不会改变，这会导致移动的元素在滚动到目标时
浏览 31提问于2019-02-13得票数 0
下面是一些示例代码及其一些花招：var h = 400;var factor = 5;
.attr("width", w) .append("g") .a
浏览 3提问于2014-09-28得票数 2
回答已采纳
1回答
正如我们所看到的，使用javascript，div可以是可拖动的、可调整大小的。我知道是否可以使用svg元素组(g)进行翻译。但是svg没有改变，位置也没有改变。
我
浏览 1提问于2014-10-10得票数 0
2回答
我有两张图片，其中一张放在另一张上，它们看起来应该像一张图片。我这样做的原因是因为我想让图像2具有动画效果。我已经将图2放在图1的顶部，一切看起来都很好。问题是，我将为此创建一个组件，并在其他一些地方重用相同的css (更改了高度和宽度)和html。
虽然我的样式适用于一个给定的大小，但一旦放大或缩小，图2就会改变它的位置</
浏览 0提问于2016-04-01得票数 1
我对cx和cy属性的动态变化有一个问题，这取决于window.innerHL.8/window.innerWidth的大小。我将发送到组件window.innerHight/window.innerWidth作为高/宽，它看起来如下：
浏览 0提问于2021-01-02得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
