我认为如果我viewBox从svg 省略属性,则假定为viewBox="0 0 100 100"。我尝试了两个测试:
<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>Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
由于两个结果相同,我认为我的猜测是正确的。请提供一些参考,以解释如果svg中省略了viewBox属性的默认值是什么。
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% 的空间。视口而不是视框。