Question

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

我尝试使用https://css-tricks.com/scale-svg/中的，。请注意，svg的宽度和高度都很大（它们都为3000）。

webpackDevServer

<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>

Answer 1

将css样式应用于基础svg而不是img元素：

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

和

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

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

注意

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

无法缩放HTML文件上的SVG

1 个答案: