SVG中的视口盒(viewbox)是否重要？

Question

< p >在SVG中，View-box的作用是什么？如果我们不提供它会发生什么？是否重要？< /p >

- Shubham Ambastha

---

viewbox 就像是一组虚拟的坐标系，SVG 中所有的矢量图形都将使用 viewbox 中的坐标，而你可以操纵 SVG 的实际高度和宽度属性，而不会影响其中的矢量图形。 - M Z

你可以让SVG有效而不需要视口，但是使用视口通常会使SVG更易于处理。 - M Z

一个带有 viewBox 的 SVG 处理起来要容易得多。我永远不会制作没有 viewBox 的 SVG。 - Rounin

完整故事：https://css-tricks.com/scale-svg/ - ccprog

Answer 1

viewBox是SVG图像能否响应式的关键。

有了viewBox，如果你重新调整画布大小，内容也会相应地按比例缩放；如果没有，内容会始终保持原始大小，你只能看到更多或更少的内容，就像在图片上覆盖一个画框一样。

- Robert Longson

Answer 2

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>

- Abhishek Bhagate