在 JS 中相当于应用于 SVG 元素的调整 CSS 大小

Question

我最近发现了 CSS

resize

属性：

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>