通过CSS控制svg变化

关注

转载最新推荐文章于 2026-07-13 09:44:28 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

配电变压器测控终端装置设计配电变压器测控终端装置在电网运行中承担着数据采集、状态监测、故障预警及远程控制的关键任务，其性能直接关系到配电系统的安全性与可靠性。本研究围绕测控终端的硬件电路、软件算法、通信系统及系统优化展开深入分析，并基于实验测试验证系统性能。硬件设计包括模拟量输入电路、电压电流信号变换电路、A/D转换电路、控制与通信电路及系统电源电路，确保信号采集的高精度与系统的稳定性。软件部分涵盖系统控制程序、数据采集与处理程序、通信程序及显示与控制程序，实现数据的实时处理与传输。通信模块结合RS-485、CAN总线及以太网技术，阅读详情

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