эквивалент в JS CSS изменения размера, примененного к элементу SVG

Question

Я недавно обнаружил изменение размера CSS: `

div {
  resize: both;
  overflow: auto;
}

` Существует также polyFill, но ни один из них не будет работать для элемента SVG: /

Возможно ли это хотя бы?

Answer 1

Начиная с вашего кода и комментария @ ChrisG, вы можете сделать следующее.

Когда вы нажимаете svg, оберните этот svg в изменяемый размер div и установите для атрибутов ширины и высоты svg значение «100%», чтобы svg получал размер оболочки.
Затем при изменении размера div размер svg также будет изменен.
Когда кто-то щелкает из div, явно задайте атрибуты svg width и height и удаляйте div.

См. Фрагмент ниже:

window.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('click', (e) => {
    var r = document.getElementById('r');
    if (r && r != e.target) {
      var svg = r.querySelector('svg');
      svg.setAttribute('width', r.offsetWidth + 'px');
      svg.setAttribute('height', r.offsetHeight + 'px');
      r.replaceWith(svg);
    }

    var svg = e.target;
    while (!!svg && svg.nodeName != 'svg')
      svg = svg.parentElement;
    if (!svg) return;

    var r = document.createElement('div');
    r.id = 'r';
    r.style.width = svg.width.baseVal.valueAsString;
    r.style.height = svg.height.baseVal.valueAsString;
    svg.setAttribute('width', '100%');
    svg.setAttribute('height', '100%');
    svg.parentElement.insertBefore(r, svg);
    r.appendChild(svg.parentElement.removeChild(svg));

  });
});

svg {
  background: #cef
}

#r {
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px;
  resize: both;
  overflow: hidden;
}

<svg width="100px" height="100px" viewBox="0 0 100 100">
  <circle stroke="navy" stroke-width="5" fill="pink" cx="50" cy="50" r="40"/>
</svg>

<svg width="100px" height="100px" viewBox="0 0 100 100">
  <circle stroke="green" stroke-width="5" fill="gold" cx="50" cy="50" r="40"/>
</svg>