开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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动画来制作游戏

游戏的灵感在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的CSS动画简直是绝配。...你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。...十分强大的GSAP让我理所当然地选择了它，而我选择在CodePen上面写码的原因是它内置了一个Babel编译器，这样我就可以在上面书写ES6的语法，你不知道Class和箭头函数有多好用！...我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。...界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的，因为我通过css让球刚好坐在柱子上，这样即使我改变柱子的高度，我也不需要改动其他代码就可以让球恰好落到柱子上。

2K3 0

浅尝iconfont

，整个页面的大小都在变，难道图标还能独善其身吗？...图标自身也会变，“来把那个图标改成红色吧，鲜艳点！”，“那个谁，把那个图标的底色改成蓝色吧~”，“...” 背景图和插图一般不会有这些问题，他们偏向于主体内容而不是点缀，一般不会改变。...使用大图片会造成两个问题：缩放效率和大图流量浪费加载慢使用svg图片可以很好的解决图片大小的问题，但是兼容性是这个解决方案的致命问题，svg不兼容IE6~8，svg不兼容Android2.3 css，...，图标本身就是小的，所以当位置相差1px看起来都会很明显 1.3 iconfont解决方案 iconfont是图标的另一种解决方案，它是把一些简单的图标制作成字体，然后让图标变成和字体一样使用 iconfont...可以发现，改变一个图标的颜色，背景色，大小都是非常方便的一件事另一方面，当需要改一个图标的时候，我们可以在制作iconfont的时候，替换掉一个图标即可，使用的类名和字码都是可以定制的，这样就可以在不用修改业务使用代码的情况下

2.3K7 0

浅尝iconfont

，整个页面的大小都在变，难道图标还能独善其身吗？...图标自身也会变，“来把那个图标改成红色吧，鲜艳点！”，“那个谁，把那个图标的底色改成蓝色吧~”，“...” 背景图和插图一般不会有这些问题，他们偏向于主体内容而不是点缀，一般不会改变。...使用大图片会造成两个问题：缩放效率和大图流量浪费加载慢使用svg图片可以很好的解决图片大小的问题，但是兼容性是这个解决方案的致命问题，svg不兼容IE6~8，svg不兼容Android2.3 css，...，图标本身就是小的，所以当位置相差1px看起来都会很明显 1.3 iconfont解决方案 iconfont是图标的另一种解决方案，它是把一些简单的图标制作成字体，然后让图标变成和字体一样使用 iconfont...可以发现，改变一个图标的颜色，背景色，大小都是非常方便的一件事另一方面，当需要改一个图标的时候，我们可以在制作iconfont的时候，替换掉一个图标即可，使用的类名和字码都是可以定制的，这样就可以在不用修改业务使用代码的情况下

1.5K2 0

2018年9月9日用HTML开发网页的总结

行内快标签和快标签：通过display改变标签的属性可以实现float浮动平铺的效果，如果是块标签无法左右平铺。...是让字体左右居中，让字体上下居中是设置一下行高，line-height. margin-top 下边会变高吗？...mragin-top只会改变盒子的位置，让盒子的位置向下移动一定的距离，不会改变盒子的大小(margin的所有属性都一样) 而pading-top会改变盒子的大小，pading-top...span是行标签 img是行内块标签 h3是块标签遇到无法调节大小的问题就修改它的标签属性。...HTML是内容的载体，用来存放内容的 CSS是用来美化内容的，比如说改变内容的位置和显示的大小颜色。

1.1K6 0

一个侧边栏导航组件实现思路

桌面到移动设备响应式布局演示用了哪些技术在这次组件探索中，我很高兴地结合了一些关键的网络平台特性：伪类 CSS Grid transforms 媒体查询和用户偏好 CSS 用户增强体验我的解决方案只有一个侧边栏...点击这些链接会改变我们网页 URL 的散列状态，然后用一个伪类来显示和隐藏 Sidenav： @media (max-width: 540px) { #sidenav-open {...在过去，我只使用绝对或固定位置 Sidenav 布局和组件。...下面是一些我正在努力实现的用户体验：动画打开和关闭；只有在用户同意的情况下才使用动画；键盘焦点不会进入屏幕以外的元素；当我开始实现动作动画的时候，我想先从可访问性开始。...我想让切换变得简单。

3.6K4 0

我至今没想到，我也能在 CSS 中实现 SVG 动画了

其中，x1 和 y1 代表直线的起点坐标，而 x2 和 y2 代表直线的终点坐标。你会发现我使用相对单位 % 来设置位置，这是一种确保图像内容调整大小以适应包含 SVG 元素的简单方法。...不幸的是，我们不能通过 CSS 独立地改变开始和结束的位置。...这里，我们想把我们对 transform 属性的改变做成动画，它能决定了条形条的位置、方向和比例。我们还可以使用 transition-duration 属性控制转换的持续时间。...因为我们让CSS动画只应用于带有.is-active类的元素，所以切换这个类会激活和关闭动画。...> 为了让耳机跳动和跳舞，过渡是不够的，需要使用到关键帧动画。

5741 0

三种 Loading 制作方案

需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。...所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。..."> .loading-svg { width: 50px; /*设置svg显示区域大小*/ height: 50px; } 标签的width和...为了给圆环添加转动效果，我们需要绘制带缺口的圆环，后面通过改变缺口的位置大小来实现转动效果，如: .path { stroke-dasharray: 95, 126; /*设置实线长95，虚线长...为了让Loading动画更加生动细腻，我们还可以给svg标签也加上一个旋转动画，如: .loading-svg { width: 50px; /*设置svg显示区域大小*/ height

3.1K1 0

SVG 快速入门

首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。...preserveAspectRatio 该属性就是用来定义上面 viewport 和 viewbox 相互对齐的方式。换句话就是说，它的属性可以改变 viewbox 的具体位置。...meet(默认值): 本意是让 svg 尽可能的显示在 viewport 里，即，会在 rat_x 和 rat_y 中选择最小的值作为缩放标准。...但是，它这里是通过椭圆上的两点来确定的，在加上旋转角度，俩轴径等因素来确定的。另外，需要注意，它的起始点是从上一个命令的结束点位置开始计算的。... 具体可以使用的动画形式和 CSS 动画一模一样，详情可以参考: SVG 动画原文链接：http://www.ivweb.io

2.9K1 1

【效果高能】你不知道的 Animation 动画技巧

通过设置一个间隔时间来不断的改变图像的位置 requestAnimationFrame - 通过一个回调函数来改变图像位置，由系统来决定这个回调函数的执行时机，比定时修改的性能更好，不存在失帧现象在大多数需求中...修改短划线和缺口值为了让 loading 组件线条可见，我们需要一个50px的短划线,设置 stroke-dasharray="50" 为了让短划线发生偏移后可以完全消失，缺口需要大于或等于圆周长157...，设置 stroke-dasharray="50 157" 添加 @keyframes 动画,为了让动画结束时仍处理动画开始位置，需要修改 stroke-dashoffset:-207(短划线+缺口长度...感谢大家的阅读，希望各位看客能够有所收获~ ~ ~ ---- 相关参考资料《Animation 常用动画属性》[11] 《CSS 参考手册》[12] 《steps 参考资料》[13] 《SVG 学习之...stroke-dasharray 和 stroke-dashoffset 详解》[14] 《理解 CSS3 Animation 中的 steps》[15] 《【译】css 动画里的 steps 用法详解

1.6K2 1

新提案，初识CSS的object-view-box属性

在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。...它允许我们裁剪或调整被替换的HTML元素，就像一个或问题在下面的例子中，我们有一个需要裁剪的图像。请注意，我们只想要该图像的特定部分。...使用并将其包裹在一个额外的元素中使用图像作为 background-image 并修改位置和大小包在一个额外的元素中这是一个常见的解决这个问题的方法,步骤如下：将图像包裹在另一个元素中...width: 180%; height: 100%; object-fit: cover; } 将图像作为背景在这个解决方案中，我们使用一个将图片作为背景，然后我们改变位置和大小值...根据我的测试，过渡或动画不能与object-view-box工作。我们也可以用一个负的 inset 值来缩小。想象一下，这对于能够缩放图像是多么有用，而不需要用一个额外的元素来包装它。

8672 0

SVG 动画精髓（上）

介绍一些动画基本原理和对应的数学原理知识点。并且文章后面，还附有相关语法的介绍，当你在遇到不熟悉语法的时候可以参考参考。前面一篇文章，主要介绍了一些 SVG 的基本概念和基本图形。...分享吉米的前端路，后面也会定期推出当前热门的前端技术~ 比如，直播，VR SVG Animation 在 SVG 中，如果我们想实现一个动画效果，可以使用 CSS，JS，或者直接使用 SVG 中自带的...dur：执行渲染时间 fill：指定动画结束后停留的装填。有freeze 和 remove 效果。remove 表示回到动画开始的位置，freeze 表示停留在动画结束的位置。...auto：让物体垂直于路径的切线方向运动。不过，如果你的路径是闭合曲线的话，需要注意起始点的位置。例如： auto-reverse：让物体垂直于路径的切线方向并 + 180°。...注意，上面三个都会改变原有物体的坐标系！！！这点很重要，换句话说，后面每次变换都是基于前面一个的变换结果的。

3.4K0 0

CSS 20大酷刑

总体资源大小 HTTP请求诚然，CSS不是造成网络臃肿的主要原因。尽管如此，仍然有优化的空间，以及可以改变我们使用CSS的方式来提升网站性能的方法。...寻找：过多的布局/回流操作，浏览器被迫重新计算页面元素的位置和大小。耗时的绘制操作，像素发生了变化。合成操作，将页面的绘制部分组合在一起以在屏幕上显示。这通常是处理器最不密集的操作。...例如，我们可以设置默认字体、颜色、大小、表格和表单字段，这些样式会统一应用于单个位置中的每个元素。很少有必要在每个组件中声明每个样式。 ---- 11....修改此属性可能会改变元素的位置、形状和大小，导致重新计算。「filter」：filter属性用于应用元素的图像滤镜效果，如模糊、对比度调整等。更改此属性可能会影响元素的可视外观，导致重新计算。...指明哪些元素将成为动画 will-change 是一个用于优化性能的CSS属性，它允许开发者预先告知浏览器某个元素将会发生变化，从而让浏览器可以做出相应的优化准备。

1813 0

SVG学习笔记，持续记录。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失...SVG可以使用CSS2的动态伪类(:hover,:active和:focus)和伪类(:first-child,:visited,:link和:lang)进行样式化.其余的CSS2伪类,包括那些与生成的内容有关的伪类...如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。...--> viewport 参考：https://zhuanlan.zhihu.com/p/422609203 2.常用属性 width、height、x、y，图形大小和左上角位置；r、cy、cx，圆形的半径...动画搭配css3的动画，也可以使用svg专有的动画标签元素。

2.5K4 0

从0开始编写一个开关组件

一如果CSS文件不加载，按照我“从0开始编写自定义单选按钮和复选框”一文中的方法，你也可以得到一个可以运行的持续增强的复选框。...我隐藏了复选框，但并没有从DOM或可访问树中删除它。我使用::before来生成胶囊形状，使用::after来生成拇指指甲形状。所有大小调整都是以em为单位，因此这些大小会根据周围的文本进行缩放。...绿色仍然有好的对比度(6.2:1)，但是我需要改变获得焦点/悬停文本的蓝色，我把边框和背景颜色调亮一点(#808080)，以获得4.8:1的对比度。...你可以看到针对禁用状态和不确定状态的其他一些调整，以及我在获得焦点/悬停上使用的SVG。 ? ? 将Wifi复选框选中并在暗黑模式下运行时，在Firefox67（开发者版本）中所看到的开关。...虽然我可能不懂波斯语或乌尔都语，但我可以向周围的人打听一些了解RTL语言的人，并确认一些假设。大多数情况下，我们知道不仅文本方向会改变，开关方向也会改变。所以我们必须把所有的东西都翻转过来才有意义。

2.4K2 0

面试官：CSS 面试题集锦

它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变）响应式的概念覆盖了自适应，而且涵盖的内容更多。...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间而改变绝对定位会触发重新布局，进而触发重绘和复合。改变绝对定位会使用到 CPU。...因此translate()更高效，可以缩短平滑动画的绘制时间。如果实现一个高性能的CSS动画效果？...高性能CSS3动画动画中尽量少使用能触发layout和paint的CSS属性，使用更低耗的transform、opacity等属性尽量减少或者固定层的数量，不要在动画过程中创建层尽量减少层的更新（

3.3K3 0

2019 年最受欢迎的10个 JavaScript 动画库！

超过 15k 星星,Velocity是一个快速的 Javascript 动画引擎，拥有与jQuery的 $.animate() 相同的API。它具有彩色动画、转换、循环、画架、SVG支持和滚动。...这里是Velocity的高性能引擎的分解，这里是使用该库的 SVG 动画的介绍。 5. Popmotion ? 超过 14K 星星，这个动画库大小只有 11 kb。...它允许开发人员从动作创建动画和交互，这些动作是可以启动和停止，可以使用CSS、SVG、React、three创建，js和任何接受数字作为输入的API。 6. Vivus ?...超过 10k 星星，Vivus是一个零依赖的JavaScript类，可以让你为SVG制作动画，让它们具有被绘制的外观。您可以使用许多可用动画之一，或创建自定义脚本来绘制SVG。...拥有15K颗星星和零依赖，这个库为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容。它支持多种简洁的效果类型，甚至允许你使用自然语言定义动画。

1.6K1 0

一步步教你用CSS添加SVG过滤器

在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。...加入 headline 把 line-height 设置为零，因为稍后标题将被加上动画效果，所以控制页面上的缩放很重要。它设定了 padding 值，使其周围能够有适量的空间，颜色也会改变。...这样将应用波纹和源图形（即文本），并将其应用为位移过滤器。尝试改变波纹的频率和振幅。...创建动画回到 page.css 文件并添加关键帧，如下所示。这将会把字体大小从零垂直宽度扩展到 5.5 垂直宽度。把它应用于标题后，文本会在屏幕上放大并被放置到位。...替换 h2 以引入一些动画之前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码，这段代码将为标题添加四秒的 CSS 动画。动画停止会停留在最后一个关键帧上。

2.8K2 0

每天10个前端小知识【Day 16】

总结 Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排。...-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化。...Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。 Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。...这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。所以不要大量使用复合图层，否则由于资源消耗过度，页面可能会变的更加卡顿。...前端常用的动画实现方式有以下几种： css3的transition 属性 css3的animation 属性原生JS动画使用canvas绘制动画 SVG动画 Jquery的animate函数使用gif

1001 0

Web性能优化：图片优化

备选技术 CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得非常清晰，占用的空间也很小。网络字体。...前端工程师最好能和设计师、产品经理保持沟通，帮助他们了解到什么样的效果比较“简洁、高效、可维护”，毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果，用图片的话至少要重新生成图片、切图并替换资源...关于移动设备上的像素和尺寸，展开说足够写一篇论文，我建议想详细了解的同学参考下面的文章：浅谈移动Web开发（上）：深入概念这里只说我们关心的部分和结论，我们需要分清不同类型的像素：CSS像素和设备像素...很多国外企业也选择了它的收费服务。...只想建议一句，Kraken的首页比智图美好几百倍…… 而且把压缩前的PNG和压缩后的JPG放在一起对比大小，真的没关系么~ 优化SVG 所有较新的浏览器都支持可缩放矢量图(SVG)，SVG

3K7 0

SVG 动画精髓

SVG Animation 在 SVG 中，如果我们想实现一个动画效果，可以使用 CSS，JS，或者直接使用 SVG 中自带的 animate 元素添加动画。...dur：执行渲染时间 fill：指定动画结束后停留的装填。有 freeze 和 remove 效果。remove 表示回到动画开始的位置，freeze 表示停留在动画结束的位置。...注意，上面三个都会改变原有物体的坐标系！！！这点很重要，换句话说，后面每次变换都是基于前面一个的变换结果的。...OK，我们现在来正式介绍一下线条动画。在 SVG 中，最长用到的线条标签就是 Path。这里我前面一篇文章已经做了介绍，我这里就不赘述了。...这里，我主要介绍一下关于 CSS 相关，SVG 就一个 Text 我直接贴代码了： <!

3.2K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭