如果从 svg 中省略，viewBox 属性的默认值是多少？

Posted 2023-02-16

【中文标题】如果从 svg 中省略，viewBox 属性的默认值是多少？

【英文标题】：What is default value of viewBox attribute if omitted from svg?

【发布时间】：2017-08-30 19:19:47

【问题描述】：

我想如果我从 svg 中省略 viewBox 属性，它会被假定为 viewBox="0 0 100 100"。我尝试了两个测试：

带有viewBox属性：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width='100' height='100'>
  <path d="M 50,5 95,97.5 5,97.5 z"/>
</svg>

没有 viewBox 属性

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" width='100' height='100' viewBox="0 0 100 100">
    <path d="M 50,5 95,97.5 5,97.5 z"/>
</svg>

由于两个结果相同，我认为我的猜测是正确的。如果从 svg 中省略，请提供一些参考来解释 viewBox 属性的默认值是什么。

【问题讨论】：

没有默认值，没有 viewBox 的 svg 的显示不能被任何 viewBox 值复制。使用 viewBox svg 内容将随其容器缩放，没有它则不会。

@RobertLongson 没有viewBox 标签并且没有指定任何宽度或高度，svg 的默认宽度和高度是多少？我总是得到 300x150 svg。

正确，这是默认设置。

@RobertLongson 我还注意到，使用viewBox 标记时，svg 会占用其容器的 100% 宽度，即使它的显示为 inline。这是为什么呢？

因为这就是 SVG 规范所说的应该发生的事情。与您观察到的所有其他事物相同。

【参考方案1】：

https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute

省略的视图框的默认值为“好像未指定”。

这里的问题有点概念性。所以与未指定的视图框等效的视图框是0 0 width height，但未指定的视图框根本不存在。一个视图框等于一个变换，如果渲染这些东西，您通常会对视图框进行等效变换并将其添加到您的矩阵中。并且未指定的视图框根本不应用任何转换。所以这个问题变成了一个未指定的transform 属性的默认值是什么。

将 SVG 对象本身视为欧几里得空间中的一个元素可能会有所帮助，就像其中的形状一样。 circle 对象（尽管不在规范范围内）可能有一个视图框。这意味着它将对圆的坐标系进行某种缩放，并使缩放后的视图等于圆的大小。所以在空间中可以有宽度和高度的所有东西都可以有一个视图框，其中一些实际上就像图像对象和嵌套的 SVG 对象一样。如果没有视图框，一切都是它在空间中实际存在的大小。在 SVG 对象本身的情况下，这意味着视图框等于在 0 0 width height 处查看它的视图，因为这是对象本身的实际大小。但是，实际上没有视图框的效果是没有效果的。实际上，等于0 0 width height 的视图框在转换为变换时最终将不应用任何缩放或平移值。但是，这可以通过简单地省略它来实现。

如果省略宽度和高度，则它们被视为等于 100%。也就是说，它们占用了用于查看它们的物理框内 100% 的空间。视口而不是视图框。

【讨论】：

像我这样处理负 x/y 定位值的人的次要兴趣点：这里的默认“0 0 宽度高度”似乎意味着砍掉那些负面的部分欧几里得空间

我的工作更关注实际几何而不是渲染，但这是真的，取决于溢出的值。对象仍然存在，它没有修改数据，但它确实改变了这些部分是否被渲染。 developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow