求助：如何让SVG内的Path元素随容器尺寸动态适配

你的问题根源很明确：SVG设置的viewBox范围（0 0 512 512）远小于Path元素的实际坐标范围，导致所有图形都落在了可视区域之外。下面给你两种直接可行的解决方法：

方法一：修改viewBox匹配路径边界（推荐） #

这是最简单的方式，让SVG的视口自动适配路径的实际大小：

1. 打开浏览器开发者工具，选中<g id="r106Sensor1">元素，在控制台执行以下代码获取路径的精确边界：

   console.log(document.getElementById('r106Sensor1').getBBox())
   

   你会得到类似DOMRect { x: 400, y: 100, width: 2600, height: 3500 }的结果（数值以实际输出为准）。
2. 将SVG的viewBox属性替换为上述结果的x y width height值，同时移除不必要的x和y属性。修改后的SVG标签示例：

   <svg viewBox="400 100 2600 3500" width="36" height="36">
     <g fill="#000000" stroke="none" class="SmokeDetector dormant" onclick="elementClick()" id="r106Sensor1">
       <!-- 原Path内容保持不变 -->
     </g>
   </svg>
   

   这样SVG会自动将整个路径缩放到你设置的width和height尺寸内，调整容器大小时路径也会跟着适配。

方法二：缩放平移路径适配原viewBox #

如果需要保留原viewBox（0 0 512 512），可以通过变换<g>元素来适配：

1. 用同样的方法获取路径的边界DOMRect，计算缩放比例：
   • 缩放比例 = 512 / Math.max(边界宽度, 边界高度)
   • 平移偏移量 = (-边界x * 缩放比例), (-边界y * 缩放比例)
2. 给<g>元素添加transform属性，示例：

   <svg viewBox="0 0 512 512" width="36" height="36">
     <g fill="#000000" stroke="none" class="SmokeDetector dormant" onclick="elementClick()" id="r106Sensor1"
        transform="translate(-58.4, -14.6) scale(0.146)">
       <!-- 原Path内容保持不变 -->
     </g>
   </svg>
   

   这里的数值是基于假设的边界计算的，你需要替换成实际计算出的结果。

内容的提问来源于stack exchange，提问作者Akshay Ram