SVG视图总是相对于它的大小？

Question

一个非常简单的例子,如果我有这个方形SVG:

<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533"
    width="50px" height="50px">

我将其更改为:

<svg class="svg-correct-symbol" viewBox="0 0 200 200"
        width="50px" height="50px">

我会看到大约四分之一的图像对吗？因为window(viewbox)您正在"查看"以查看SVG 的宽度和高度减半.

因此视图框的编号:442.533将始终表示图像宽度/高度的100%.

如何设置此默认视图框号？此视图框大小是由导出文件时的大小决定的吗？我想有一个更圆润的viewBox viewBox="0 0 16 16".

对于已导出的图像,我看不到改变它的方法.

Answer 1

没有默认viewBox号码.它是在创建svg图像时定义的(手动或使用像illustrator这样的软件).它有4个坐标x y width height.让它变得棘手的是这些坐标与图像尺寸无关,就像你提到的那样,它只定义了你"透视"的区域.

您可以设置所需viewbox的任何值.但是您还需要scale相应的svg图像以适合您的新视图.同样,您可能还需要translate/移动x , y轴中的图像以使其居中或适合框架/ viewbox.

从文档中查看svg 转换. 本教程对于理解svg转换也很有用.

如果您使用的是像illustrator这样的软件,您需要做的就是设置定义视图框的画板尺寸,然后相应地缩放.