html - 如果从 svg 中省略,viewBox 属性的默认值是多少?

标签 html xml svg

我想如果我省略 viewBox来自 svg 的属性假定为 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 属性的默认值是什么。

    最佳答案

    https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute
    省略的 View 框的默认值为“好像未指定”。
    这里的问题有点概念性。所以与未指定的 View 框等效的 View 框是0 0 width height但是一个未指定的 View 框根本不存在。一个 View 框等于一个变换,如果渲染这些东西,您通常会对 View 框进行等效变换并将其添加到您的矩阵中。并且未指定的 View 框根本不应用任何转换。所以这个问题变成了什么是未指定的默认值 transform属性。
    将 SVG 对象本身视为欧几里得空间中的一个元素可能会有所帮助,就像其中的形状一样。 circle 是可能的对象(尽管不在规范范围内)以具有 View 框。这意味着它将对圆的坐标系进行某种缩放,并使缩放后的 View 等于圆的大小。因此,在空间中可以有宽度和高度的所有东西都可以有一个 View 框,其中一些实际上就像图像对象和嵌套的 SVG 对象一样。如果没有 View 框,一切都是它在空间中实际存在的大小。对于 SVG 对象本身,这意味着 View 框等于 View ,相当于在 0 0 width height 处查看它。因为这是对象本身的实际大小。但是,实际上没有 View 框的效果是没有效果的。真正等于 0 0 width height 的 View 框当变成变换时,最终将不应用任何缩放或平移值。但是,这可以通过简单地省略它来实现。
    如果省略宽度和高度,则它们被视为等于 100%。也就是说,它们占用了用于查看它们的物理框内 100% 的空间。视口(viewport)与视框相对。

    关于html - 如果从 svg 中省略,viewBox 属性的默认值是多少?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43226741/

    相关文章:

    html - 在 &lt;footer&gt; 元素中使用 2 个部分的问题

    html - 屏幕阅读器用户(何时)使用选项卡?

    java - 是否可以使用复杂的 XML 模板文件动态生成 Android UI?

    Android:盒子阴影和边框半径布局

    html - RTMP 到浏览器

    HTML/CSS 列表图像/元素符号上方/下方

    xml - XSLT:从特定 child 开始的 child 的不同迭代

    react-native - 在标签栏中显示组件 react-native-router-flux

    javascript - SVG Knockout 文本样式问题 : unexplained cropped bottom

    node.js - 将 SVG 路径转换为线段