SVG和viewBox值


14

我只是好奇是否有人知道如何确定viewBox价值(即viewBox="a b c d")。

我试图了解Inkscape的SVG功能,所以我在Inkscape中创建了一个100pxx 的文档,100px从视口的左侧(即0水平值)到右侧(即100水平值)画了一条线。

但是,奇怪的是,当我将此文档另存为普通SVG文件,然后在文本编辑器中打开该文件时,这些viewBox值设置为viewBox="0 0 26.458333 26.458334"而不是viewBox="0 0 100 100"

是否有人知道如何0 0 26.458333 26.458334确定这些值(),以及为什么它们与视口尺寸之间似乎没有关系?

PS:我知道您可以viewBox在文档选项中手动编辑属性,但是我仍然对Inkscape为什么将它们设置为时髦值感到好奇。

Answers:


19

Inkscape使用mm作为文档的默认显示单位用户单位用户单位用于将值存储在SVG文件中。

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

此标记描述的绘图大小为100px x 100px。viewBox属性定义100px x 100px26.458333 x 26.458333 user units

SVG比例因子将是1px / 0.2645 user-unit,SVG渲染器可以使用SVG比例因子将存储在用户单位中的所有值转换为现实世界的图纸尺寸。


在这种情况下,Inkscape希望将值存储在其中mm,因此它必须知道px与的关系mm。的CSS规范描述了绝对长度单位是固定在相对于彼此:96px = 1in

这表示 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

这就是26.45833333来源。


如果希望Inkscape将所有值存储在中px,则可以在文档属性(文件>文档属性>选项卡:页面>常规>显示单位)中将默认的显示单位用户单位更改为px

  1. 默认值,毫米:

文件属性mm

  1. 已更改:px:

文件属性px

导出同一文档将产生以下SVG标签:

<svg width="100" height="100" viewBox="0 0 100 100">

现在,SVG比例因子为1px / 1 user-unit

如果您想进一步了解该主题,Inkscape Wiki中有更详细的解释。

备注:

  • Inkscape v0.92使用的关系96px/in,Inkscape v0.91和更早使用的值90px/in

哇。很有意思。所以这有一个押韵和原因。非常感谢您分享您的知识!
oldboy

我要记住您使用的调白技术。我通常在屏幕截图的重要部分周围加上红色方块,您的照片会很多。
aaaaaa
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.