通过CSS控制svg变化

最新推荐文章于 2024-07-10 15:13:25 发布

xiaojinglyd

最新推荐文章于 2024-07-10 15:13:25 发布

阅读量1.2k

点赞数 1

分类专栏： css html 文章标签： css svg 通过CSS控制svg变化

原文链接：https://blog.csdn.net/lydxwj/article/details/119191518

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

本文通过实例介绍了如何使用CSS和SVG的viewBox属性来控制SVG图形的大小，以及如何通过CSS修改SVG的填充颜色。通过移除内联fill属性和设置fill为currentColor，实现了图形颜色的统一控制。同时，调整stroke属性可以改变边框颜色。

摘要由CSDN通过智能技术生成

本文介绍使用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>