javascript - 在 JS 中等效于应用于 SVG 元素的调整大小的 css

Question

我最近发现了 CSS 调整大小: `

div {
  resize: both;
  overflow: auto;
}

` 还有一个 polyFill，但它们都不适用于 SVG 元素:/

至少有可能吗？

Answer 1

从您的代码和@ChrisG 的评论开始，您可以执行以下操作。

当点击 svg 时，将此 svg 包装到可调整大小的 div 中并设置 svg 宽度和高度属性设置为“100%”，这样 svg 就会得到包装器的大小。
然后，当调整 div 大小时，svg 也会调整大小。
当点击 div 时，显式设置 svg 宽度和高度属性并删除 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>