在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元素中的高度和宽度属性。添加一个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> . < / >节

2022-11-06 00:35:21

使用以下代码:

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

2019-04-17 08:05:37

下面是一个使用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);

2017-07-07 01:03:27

改变容器的宽度也可以修复它，而不是改变源文件的宽度和高度。

.SvgImage img{ width:80%; }

这修复了我重新调整svg大小的问题。您可以根据您的要求给出任何%。

2015-04-17 20:23:03

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

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

2012-08-09 05:47:30

在html中调整SVG大小?

推荐文章

最新文章

标签