删除svg元素中的高度和宽度属性。添加一个viewBox属性，例如viewBox 00 100 100，然后使用普通的CSS高度或宽度来缩放svg元素。

注意:viewBox属性区分大小写。如果你用小写的b，它是行不通的。

.fifty { 高度:50 px ｝ .hundred { 身高:100像素 ｝ < h3 > 50×50 < / h3 > < >节 <svg class="fifty" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg> . < / >节 100 x100 < h3 > < / h3 > < >节 <svg class="百" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg> . < / >节

使用以下代码:

<g transform="scale(0.1)">
...
</g>

下面是一个使用svg.getBox()获取边界的例子: https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

最后，您将得到可以插入svg以正确设置视图框的数字。然后在父div上使用任何css，你就完成了。

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

用文本编辑器打开你的.svg文件(它只是XML)，在顶部寻找如下内容:

<svg ... width="50px" height="50px"...

擦除宽度和高度属性;默认值是100%，所以它应该扩展到容器允许的任何值。

试试这些:

设置缺失的视图框，并在svg标记中填充设置的height和height属性的高度和宽度值 然后缩放图片，只需将高度和宽度设置为所需的百分比值。祝你好运。 使用preserveAspectRatio="X200Y200 meet(例如200px)设置一个固定的宽高比，但这是不必要的

e.g.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

您可以通过在图像标签和大小图像标签中显示SVG来调整它的大小。

<img width="200px" src="lion.svg"></img>