Масштабирование 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/

Например, что-то вроде:

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

Фактические значения, которые вы передадите, будут зависеть от того, что вы рисуете, и где оно находится на холсте. viewBox() Параметры: minX, minY, ширина и высота.