< p >在SVG中,View-box的作用是什么?如果我们不提供它会发生什么?是否重要?< /p >
viewBox是SVG图像能否响应式的关键。
有了viewBox,如果你重新调整画布大小,内容也会相应地按比例缩放;如果没有,内容会始终保持原始大小,你只能看到更多或更少的内容,就像在图片上覆盖一个画框一样。
viewBox 属性定义了 SVG 视口在用户空间中的位置和尺寸。viewBox 属性的值是由四个数字组成的列表:min-x、min-y、width 和 height。这些数字由空格和/或逗号分隔,指定了用户空间中映射到关联 SVG 元素边界的矩形。
这段内容来源于 MDN文档。基本上,你正在设置 SVG 的坐标、宽度和高度。语法是:viewBox = "min-x min-y width height"
。 viewBox 的目的是选择应该实际呈现在页面上的 SVG 平面的那一部分。
如果没有 viewBox 标签并且没有指定任何宽度或高度,SVG 将不会缩放。以下是一个示例:
<!--This one is without a viewbox which wont scale-->
<svg>
<path d="M 15,5 25,27.5 5,27.5 z"/>
</svg>
<!--This one is with a viewbox which will scale. Check by opening in full page-->
<svg viewBox="0 0 200 200">
<path d="M 15,5 25,27.5 5,27.5 z"/>
</svg>
viewBox
的 SVG 处理起来要容易得多。我永远不会制作没有viewBox
的 SVG。 - Rounin