blocks|key|1213416|text|使用文本编辑器(只是XML)打开您的.svg文件，并在顶部查找类似以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1213417|<svg+...+width="50px"+height="50px"...|code-block|syntax|javascript|1213418|擦除宽度和高度属性；默认值是100%25，所以它应该伸展到容器允许的任何位置。|1213419|entityMap^0|I|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Open your <code>.svg</code> file with a text editor (it's just XML), and look for something like this at the top:

<pre><code>&lt;svg ... width="50px" height="50px"...
</code></pre>

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

blocks|key|1000013|text|您可以通过在图像标签和大小图像标签中显示svg来调整其大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1000014|<img+width="200px"+src="lion.svg"></img>|code-block|syntax|javascript|1000015|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can resize it by displaying svg in image tag and size image tag i.e.

<pre><code>&lt;img width="200px" src="lion.svg"&gt;&lt;/img&gt;
</code></pre>

blocks|key|1214322|text|下面是一个使用svg.getBox()获取边界的示例：https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1214323|最后，您将获得一些数字，您可以将这些数字插入到svg中以正确设置viewbox。然后在父div上使用任何css，就完成了。|1214324|+//+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);|code-block|syntax|javascript|1214325|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44^0|7|C|R|1X|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Here is an example of getting the bounds using <code>svg.getBox()</code>:
<a href="https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44" rel="nofollow noreferrer">https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44</a>

At the end you get numbers that you can plug into the svg to set the viewbox properly. Then use any css on the parent div and you're done.

<pre><code> // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
 box = svg.getBBox(), // &lt;- 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);
</code></pre>

blocks|key|1000117|text|我发现最好将viewBox和preserveAspectRatio属性添加到我的SVG中。视图框应该在表单0+0+w+h中描述SVG的全宽和全高|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1000118|<svg+preserveAspectRatio="xMidYMid+meet"+viewBox="0+0+700+550"></svg>|code-block|syntax|javascript|1000119|entityMap^0|6|7|E|J|1H|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

I have found it best to add <code>viewBox</code> and <code>preserveAspectRatio</code> attributes to my SVGs. The viewbox should describe the full width and height of the SVG in the form <code>0 0 w h</code>:

<pre><code>&lt;svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"&gt;&lt;/svg&gt;
</code></pre>

blocks|key|1214390|text|使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1214391|<g+transform="scale(0.1)">
...
</g>|code-block|syntax|javascript|1214392|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use the following code:

<pre><code>&lt;g transform="scale(0.1)"&gt;
...
&lt;/g&gt;
</code></pre>

So, I have an SVG file in HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.

I know with a jpeg or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.

However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.

IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

Resizing SVG in html?

图像标签

文件系统

容器

所以，我有一个HTML格式的SVG文件，我听说过的关于这种格式的一件事是，当你放大它时，它不会变得完全像素化。我知道对于jpeg或者其他任何我可以将其存储为50x50的图标，然后通过手动设置image_src标签中的高度和宽度，实际上将其显示为(相当于像素化的)100x100(或10x10)缩略图。然而，SVG文件似乎...

问在html中调整SVG的大小？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中调整SVG的大小？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中调整SVG的大小？
EN