将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.com/geometry/#svg-viewbox

例如：

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

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