如果从svg中省略,viewBox属性的默认值是什么?

时间:2017-04-05 09:11:07

标签: html xml svg

我想如果我从svg中省略viewBox属性,则假定它是viewBox="0 0 100 100"。我尝试了两次测试:

  1. 使用viewBox属性:
  2. 
    
    <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>
    &#13;
    &#13;
    &#13;

    1. 没有viewBox属性
    2. &#13;
      &#13;
      <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>
      &#13;
      &#13;
      &#13;

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

1 个答案:

答案 0 :(得分:0)

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的viewbox最终将不应用任何缩放,也不会在转换后转换值。但是,可以通过简单地省略它来实现。

如果省略宽度和高度,则它们等于100%。也就是说,它们占据了用于查看它们的物理盒子中100%的空间。视口而不是视口。