将svg缩放到父容器

Question

我正在使用svg.js像画布一样在上面绘制线条。是否可以将通过调用SVG()创建的svg元素缩放到父元素的大小？到目前为止，我只是在元素调整大小时重新绘制所有的线条。

<div
  ref={r => this.whiteboard = r}
  id="whiteboard"
  >
</div>
{...}
let { offsetWidth: width, offsetHeight: height } = this.whiteboard;
this.draw = SVG('whiteboard').size(width, height);

我使用的是React，我知道它很难与svg.js混合使用，但这是另一种对话。

Answer 1

使用SVG.ViewBox

http://svgjs.dev/geometry/#svg-viewbox

例如，如下所示：

this.draw = SVG('whiteboard').size(width, height).viewbox(0,0,500,300);

您传递的实际值将取决于您正在绘制的内容，以及它在画布上的位置。viewBox()参数包括: minX、minY、width和height。