在html中调整SVG大小？
所以，我有一个HTML格式的SVG文件，其中一个我听说过的格式是放大时不能全部显示。
我知道一个JPEG或任何我可以将它存储为一个50×50的图标，然后实际显示为（相当像素）100×100缩略图（或10×10），手动设置高度和宽度在image_src标签。
然而，SVG文件似乎与object / embed标签一起使用，改变THOSE的高度或宽度只会导致为图片分配更多的空间。
有没有什么办法可以指定你想要的SVG图像显示比实际存储在文件系统中更小或更大？
用一个文本编辑器打开你的.svg文件（这只是XML），然后在顶部查找这样的东西：
<svg ... width="50px" height="50px"...
擦除宽度和高度属性; 默认值是100％，所以它应该延伸到容器允许的范围内。
试试这些：
-
设置缺less的视图框，并在svg标签中填写高度和高度属性的高度和宽度值
-
然后通过将高度和宽度设置为所需的百分比值来缩放图片。 祝你好运。
-
使用
preserveAspectRatio="X200Y200 meet（例如200px）设置一个固定的宽高比，但没有必要
例如
<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">
你可以通过在图像标签和大小图像标签ie中显示svg来调整它的大小
<img width="200px" src="lion.svg"></img>
更改容器的宽度也可以修复它，而不是更改源文件的宽度和高度。
.SvgImage img{ width:80%; }
这解决了我调整svg的问题。 你可以根据你的要求给出任何％。
以下是使用svg.getBox()获取边界的示例： https ： svg.getBox()
最后你得到的数字，你可以插入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);
