无法在 html 文件上缩放 svg答案

【问题标题】：Cannot zoom svg on a html file无法在 html 文件上缩放 svg
【发布时间】：2019-11-02 17:54:57
【问题描述】：

我正在制作一个简单的 index.html 页面，它只包含一个 svg 图和一个表格。但是，当我使用 command+Plus 显示 html 时，我无法缩放 svg（但我可以缩放表格）。

我尝试使用来自https://css-tricks.com/scale-svg/ 的 , , 。请注意，svg 的宽度和高度有点大（它们都是 3000）。

<body>
   <div class="main-wrapper">
     <img src="graph.svg" style="width:100%; height: auto">

     <table class="container">
          <tr>
            <th>value1</th>
            <td>1</td>
          </tr>
          <tr>
            <th>value2</th>
            <td>2</td>
          </tr>
          <tr>
            <th>value3</th>
            <td>3</td>
          </tr>
     </table>
   </div>
</body>

.main-wrapper{
   height: 100vh;
   weight: 100vw;
}

【问题讨论】：

vh 和 vw 不能很好地使用缩放，不幸的是。尝试为您的主包装器使用不同的单位。另外，您使用 weight 而不是 width 的任何原因？
对不起，我打错了css代码。它应该是宽度：100vw。但是，它仍然无法正常工作。我试图添加一个带有引导程序的容器。 <div class="container><img...></div> 布局还是没做对。

标签： html css svg

【解决方案1】：

将 css 样式应用于底层 svg 而不是 img 元素：

img svg  {
   height: auto;
   width: 100%;
}

和

...
<img src="graph.svg">
...

Live Demo 在 jsfiddle（当然还有另一个 svg）。

警告

解决方案可能取决于引用的 svg 的结构。

【讨论】：