通过CSS控制svg变化

最新推荐文章于 2024-04-19 09:30:00 发布
最新推荐文章于 2024-04-19 09:30:00 发布
阅读量3.3k 收藏 5
点赞数
分类专栏： css html 文章标签： css svg 样式控制svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lydxwj/article/details/119191518
版权
css 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
html
8 篇文章 0 订阅
订阅专栏

本文介绍使用css魔法控制svg变化，要想实现这一点只需要耐心看下去！

svg代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>

  </style>
</head>
<body>
  <svg width="100" height="86" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>心</title>
      <path id="svg_1" d="m39.073334,65.405621c-20.084052,-14.68342 -27.264901,-23.971887 -27.323097,-35.342652c-0.053071,-10.365845 8.811315,-20.370413 17.99769,-20.312718c4.587266,0.028868 14.427243,3.844067 17.911613,6.944866c1.755631,1.562362 2.587182,1.408298 6.495906,-1.203522c10.637898,-7.108256 21.025912,-7.257456 27.753647,-0.398585c10.75235,10.961918 8.794766,24.052449 -5.627388,37.630866c-7.667647,7.219075 -24.412104,20.026118 -26.182963,20.026118c-0.538848,0 -5.500278,-3.304975 -11.025407,-7.344376l0,0.000003z" stroke-width="1.5"
        fill="#fff"
        stroke="#000"
        />
    </g>
  </svg>
</body>
</html>
效果图

在这里插入图片描述

控制大小

svg原来的宽100、高86，我们尝试把它变成宽50px、高43px，下面是css的代码

svg {
    width: 50px;
    height: 43px;
}
效果图

在这里插入图片描述

怎么会这样？和想象的差距有点大！图像没有缩放，而是被裁减了。是时候请出svg的大神属性viewBox了，给svg标签增加属性viewBox="0,0,100,86"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>
+	svg {
+        width: 200px;
+        height: 172px;
+    }
  </style>
</head>
<body>
-  <svg width="100" height="86" xmlns="http://www.w3.org/2000/svg">
+  <svg width="100" height="86" viewBox="0,0,100,86" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>心</title>
      <path id="svg_1" d="m39.073334,65.405621c-20.084052,-14.68342 -27.264901,-23.971887 -27.323097,-35.342652c-0.053071,-10.365845 8.811315,-20.370413 17.99769,-20.312718c4.587266,0.028868 14.427243,3.844067 17.911613,6.944866c1.755631,1.562362 2.587182,1.408298 6.495906,-1.203522c10.637898,-7.108256 21.025912,-7.257456 27.753647,-0.398585c10.75235,10.961918 8.794766,24.052449 -5.627388,37.630866c-7.667647,7.219075 -24.412104,20.026118 -26.182963,20.026118c-0.538848,0 -5.500278,-3.304975 -11.025407,-7.344376l0,0.000003z" stroke-width="1.5"
        fill="#fff"
        stroke="#000"
        />
    </g>
  </svg>
</body>
</html>
效果图

在这里插入图片描述

理解SVGviewBox

控制颜色

svg的填充是白色，我想修改成红色，整一个大红心，下面是css的代码

svg {
    width: 200px;
    height: 172px;
    fill: currentColor;
    color:red;
}
效果图

在这里插入图片描述

现实很残酷啊，什么变化也没有！但是你仔细看一下path标签里面有一个行内属性fill="#fff"，那么问题就解决了，只需要把属性fill去掉。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>
+	svg {
+        width: 200px;
+        height: 172px;
+        fill: currentColor;
+        color:red;
+    }
  </style>
</head>
<body>
   <svg width="100" height="86" viewBox="0,0,100,86" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>心</title>
      <path id="svg_1" d="m39.073334,65.405621c-20.084052,-14.68342 -27.264901,-23.971887 -27.323097,-35.342652c-0.053071,-10.365845 8.811315,-20.370413 17.99769,-20.312718c4.587266,0.028868 14.427243,3.844067 17.911613,6.944866c1.755631,1.562362 2.587182,1.408298 6.495906,-1.203522c10.637898,-7.108256 21.025912,-7.257456 27.753647,-0.398585c10.75235,10.961918 8.794766,24.052449 -5.627388,37.630866c-7.667647,7.219075 -24.412104,20.026118 -26.182963,20.026118c-0.538848,0 -5.500278,-3.304975 -11.025407,-7.344376l0,0.000003z" stroke-width="1.5"
-        fill="#fff"
        stroke="#000"
        />
    </g>
  </svg>
</body>
</html>
效果图

在这里插入图片描述

其实还有另一种方法，使用fill="currentColor"。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>
+    svg {
+      width: 200px;
+      height: 172px;
+      color:red;
+    }
  </style>
</head>
<body>
  <svg width="100" height="86" viewBox="0,0,100,86" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>心</title>
      <path id="svg_1" d="m39.073334,65.405621c-20.084052,-14.68342 -27.264901,-23.971887 -27.323097,-35.342652c-0.053071,-10.365845 8.811315,-20.370413 17.99769,-20.312718c4.587266,0.028868 14.427243,3.844067 17.911613,6.944866c1.755631,1.562362 2.587182,1.408298 6.495906,-1.203522c10.637898,-7.108256 21.025912,-7.257456 27.753647,-0.398585c10.75235,10.961918 8.794766,24.052449 -5.627388,37.630866c-7.667647,7.219075 -24.412104,20.026118 -26.182963,20.026118c-0.538848,0 -5.500278,-3.304975 -11.025407,-7.344376l0,0.000003z" stroke-width="1.5"
-       fill="#fff"
+		fill="currentColor"
        stroke="#000"
        />
    </g>
  </svg>
</body>
</html>

虽然控制了填充，但是边框并没有改变，如果想同时控制边框只要参考上面的修改stroke属性就可以。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>
+    svg {
+      width: 200px;
+      height: 172px;
+      color:red;
+    }
  </style>
</head>
<body>
  <svg width="100" height="86" viewBox="0,0,100,86" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>心</title>
      <path id="svg_1" d="m39.073334,65.405621c-20.084052,-14.68342 -27.264901,-23.971887 -27.323097,-35.342652c-0.053071,-10.365845 8.811315,-20.370413 17.99769,-20.312718c4.587266,0.028868 14.427243,3.844067 17.911613,6.944866c1.755631,1.562362 2.587182,1.408298 6.495906,-1.203522c10.637898,-7.108256 21.025912,-7.257456 27.753647,-0.398585c10.75235,10.961918 8.794766,24.052449 -5.627388,37.630866c-7.667647,7.219075 -24.412104,20.026118 -26.182963,20.026118c-0.538848,0 -5.500278,-3.304975 -11.025407,-7.344376l0,0.000003z" stroke-width="1.5"
-       fill="#fff"
+		fill="currentColor"
-       stroke="#000"
+		stroke="currentColor"
        />
    </g>
  </svg>
</body>
</html>
效果图

在这里插入图片描述

在这里插入图片描述

lydxwj
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
11.仅使用CSS对任何SVG图标进行动画处理
粉丝们务必加入微信粉丝群
04-17 1098
效果 （源码最后面） 视频演示 使用CSS3在Scroll上进行SVG图像转换 视频地址一：https://www.bilibili.com/video/BV1AA411b7tA/ 视频地址二：https://www.ixigua.com/i68140285600349557...
使用简单CSS操作SVG图标
Web design 教程小屋
07-08 3885
本文是由三部分组成的系列文章的第二篇，该系列文章将展示Iconic将提供的新的图像学方法。 用CSS样式图标 智能图标引起了人们的极大兴趣，但样式可能是每天最有用的功能。 图标集涵盖了广泛的不同主题，但以单一视觉样式呈现。 如果不是最佳的话，这通常是适当的。 但是，在许多情况下，特定的图标可以并且应该具有特定的样式（颜色，笔触宽度或其他属性）。 静态图片无法进行样式设置（除非您针对每...
使用CSS3实现SVG路径描边动画效果入门教程
12-14
不依赖javascript，直接使用纯css实现 svg 的描边绘制动画效果，效果演示动画。 基础知识： SVG中有个比较重要的属性分支 stroke ，中文软件中称为“描边”。和stroke相关的属性还有下面这些： 1、 stroke 表示描边颜色。表示颜色的名字不是stroke-color，只是单纯的stroke。它的值官方称为“paint”，可选值的类型包括 none 、 currentColor 、 <color> 。 none <color> currentColor 2、 stroke-width 表示描边的粗细。 3、 stroke-linecap 表示描边端点表现方式。可
使用css与SVG整合
最新发布
wsl3465205046的博客
04-19 433
通过以上学习路径，你可以逐步掌握如何结合CSS样式表来控制SVG元素的外观，为你的SVG图形增添更多的美观和创意。
Css绘制svg路径动画
weixin_43866528的博客
02-18 1295
最近发现了可以使用css中的animation制作svg动画
【CSS】SVG实战入门，svg画曲线，svg简单动画上手入门
余浩的博客
03-14 3414
- `` 根元素以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间， - `version` 属性可定义所使用的 SVG 版本， - `` 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， - `` 元素允许咱们为图像定义完整的描述信息， - ``标签 用来创建一个矩形，通过 `fill` 属性 把背景颜色设为黄色。 - ``标签 用来创建一个圆。
CSS3 SVG网格六边形图案特效
07-24
如果是背景图片，可以通过CSS控制其大小和位置，同样可以实现六边形的动态效果。 总结来说，"CSS3 SVG网格六边形图案特效"是利用CSS3的`transform`、`position`、`:hover`伪类和`animation`属性，结合SVG的矢量图形...
CSS3 SVG波浪线条动画特效
07-24
在实现动画时，我们可以通过改变SVG路径数据的属性来更新线条的形状，同时利用CSS3的`animation`属性将这个变化绑定到`@keyframes`定义的动画上。这样，线条就可以按照预设的节奏和样式进行波浪滚动。 在实际应用中...
CSS3 SVG地图路线轨迹特效
07-24
这个特效的核心在于使用SVG绘制地图，并通过CSS3动画控制路径的显示。具体步骤如下： 1. **SVG地图创建**：首先，我们需要一个SVG地图，这通常是由SVG路径数据表示的地理区域。这些路径数据由一系列坐标点组成，...
CSS3 SVG气泡加载动画特效
06-24
总的来说，CSS3 SVG气泡加载动画特效是一个综合运用了现代前端技术的优秀示例，它展示了如何通过CSS3和SVG的结合，创造出既美观又实用的交互式用户体验。对于开发者来说，理解和掌握这些技术，不仅可以提升网页的...
CSS3 SVG卡通QQ表情特效特效代码
03-20
通过修改SVG元素的属性，如路径的控制点、填充颜色等，可以实现表情的动态变化。 **SVG与CSS3结合** 将SVG与CSS3关键帧动画结合，可以创建出丰富的交互式动画效果。例如，可以定义一个SVG的path元素表示笑脸的嘴巴...
CSS3 SVG甜甜圈输送带特效
07-31
设计师可以利用SVG的特性，如路径（`<path>`）、圆形（`<circle>`）、椭圆（`<ellipse>`）等元素来创建不同款式的甜甜圈，并通过CSS控制这些元素的样式。 接着，CSS3作为现代网页布局和样式的重要工具，为这个特效...
css3 svg蓝色波浪动画特效
07-24
此外，为了使动画看起来更自然，我们还可以调整SVG路径的平滑度，通过设置`stroke-linecap`和`stroke-linejoin`属性，或者添加额外的控制点来优化曲线。 最后，将这个SVG元素插入HTML文档中，就可以看到蓝色波浪...
CSS3 SVG礼花纸屑动画特效特效代码
03-20
2. **CSS3动画**：通过CSS3的`@keyframes`规则定义动画，设定各个阶段的样式变化，比如改变纸屑的位置、旋转角度、透明度等。可以使用`animation`属性将这些动画应用到SVG元素上，设置动画的时长、延迟、次数和方向...
css3 svg线条花纹动画特效
07-24
通过以上步骤，我们就可以创建出一个具有吸引力的“css3 svg线条花纹动画特效”。这种特效不仅可以用于网站背景、按钮、边框等多种设计场景，还能通过调整参数和元素，实现各种独特而富有创意的视觉表现。在不断探索...
利用css修改svg图标颜色
qq_33256701的博客
01-10 4234
1、将svg 标签的第一个fill改为 fill="currentColor"2、将 path 里的 fill 属性 删除。这样svg图标颜色就会自动继承父元素的了。
svg中使用css样式,用CSS给SVG <use>的内容添加样式
weixin_29197051的博客
08-03 2778
SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG 元素在文档中任意位置“实例化”图标。一、SVG结构化、分组，以及在SVG中引用(重用)元素速览SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码：, , 和 。元素(“group”的简写)，用于给逻辑上相联系的图形元素分组。元素用来定义你之后要重用的元素。元素结合了和元素的优点，将定义模板的元...
SVG+CSS动画实现动效（流光、呼吸等效果）
qq_39345221的博客
02-01 6855
css+svg实现流光、呼吸等动效
vue 如何不用js和css代码来控制纯svg绘制的动画的开始结束
07-16
如果你想在Vue中不使用任何JavaScript和CSS代码来控制纯SVG绘制的动画的开始和结束，可以使用Vue的过渡和动画钩子函数来实现。 以下是一个使用Vue过渡和动画钩子函数来控制SVG动画的示例： ```html <template> <div> <svg> <circle ref="myCircle" cx="50" cy="50" r="20" :class="{ 'animation': animate }" @click="toggleAnimation" ></circle> </svg> </div> </template> <script> export default { data() { return { animate: false }; }, methods: { toggleAnimation() { this.animate = !this.animate; } }, mounted() { this.$refs.myCircle.addEventListener('transitionend', () => { // 动画结束时触发的逻辑 if (!this.animate) { this.$refs.myCircle.style.animation = ''; } }); }, watch: { animate(value) { if (value) { this.$refs.myCircle.style.animation = 'myAnimation 1s infinite'; } else { this.$refs.myCircle.style.animation = 'none'; } } } }; </script> ``` 在上述代码中，我们通过`ref`属性给圆形元素绑定了一个引用名为`myCircle`。使用`class`属性来动态控制是否添加`animation`类名，并在点击圆形元素时触发`toggleAnimation`方法来切换动画的开始和暂停。 通过`mounted`钩子函数，我们为SVG元素的`transitionend`事件添加了一个监听器，当动画结束时会执行相应的逻辑。在这里，我们根据`animate`的值来决定是否将`style.animation`设置为空字符串或`none`，以实现动画的开始和暂停。 通过`watch`属性监听`animate`的变化，当`animate`的值改变时，会根据其值来动态修改SVG元素的`style.animation`属性，从而开始或停止动画。 这样，你可以在Vue中通过过渡和动画钩子函数来控制纯SVG绘制的动画的开始和结束，而不需要编写额外的JavaScript和CSS代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值