在html中调整SVG大小?

我有一个HTML格式的SVG文件，我听说过的一件事是，当你放大它时，它不会完全像素化。

我知道jpeg或任何我可以将它存储为50 * 50的图标，然后实际显示为(相当像素化)100 * 100的缩略图(或10 * 10)，通过手动设置image_src标签的高度和宽度。

然而，SVG文件似乎是与object/embed标签一起使用的，改变这些标签的高度或宽度只会导致为图片分配更多的空间。

有什么方法可以指定您想要SVG图像显示的比它实际存储在文件系统中的更小或更大?

当前回答

使用以下代码:

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

2019-04-17 08:05:37

其他回答

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

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

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

2010-06-25 19:15:33

试试这些:

设置缺失的视图框，并在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">

2011-09-16 19:33:45

我发现最好添加viewBox和preserveAspectRatio属性到我的svg。视图框应该以0 0 w h的形式描述SVG的全宽和高:

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

2018-09-30 14:54:42

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

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

2012-08-09 05:47:30

使用以下代码:

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

2019-04-17 08:05:37

在html中调整SVG大小?

推荐文章

最新文章

标签