javascript - 将 svg 缩放到父容器

Question

我正在使用 svg.js 像 Canvas 一样在上面画线。是否可以将通过调用 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);

您传递的实际值将取决于您正在绘制的内容以及它在 Canvas 上的位置。 viewBox() 参数为:minX、minY、宽度和高度。