在html中调整SVG的大小？

Question

所以,我有一个HTML格式的SVG文件,我听说过这种格式的一个原因是当你放大它时它并没有全部像素化.

我知道使用jpeg或其他任何我可以存储为50乘50的图标,然后实际显示为(相当像素化)100×100缩略图(或10乘10),通过手动设置image_src中的高度和宽度标签.

但是,SVG文件似乎与object/embed标签一起使用,并且更改THOSE的高度或宽度只会导致为图片分配更多空间.

有没有办法指定您希望SVG图像的显示小于或大于它实际存储在文件系统中？

Answer 1

.svg使用文本编辑器打开文件(它只是XML),并在顶部查找类似的内容:

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

擦除宽度和高度属性; 默认值为100%,因此它应该伸展到容器允许的任何值.

Answer 2

试试这些:

1. 设置缺少的视图框并在svg标记中填写set height和height属性的高度和宽度值

2. 然后,只需将高度和宽度设置为所需的百分比值即可缩放图片.祝好运.

3. 设置固定的宽高比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">

Answer 3

您可以通过在图像标签和尺寸图像标签中显示svg来调整大小

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

Answer 4

我发现最好为我的 SVG添加viewBox和preserveAspectRatio属性。视图框应以以下形式描述 SVG 的完整宽度和高度0 0 w h：

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Answer 5

使用以下代码：

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

Answer 6

更改容器的宽度也会修复它,而不是更改源文件的宽度和高度.

.SvgImage img{ width:80%; }

这解决了重新调整svg大小的问题.你可以根据你的要求给出任何%.

Answer 7

这是使用以下方法获取边界的示例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);