Question

我最近发现CSS调整大小： `

div {
  resize: both;
  overflow: auto;
}

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

至少有可能吗？

Answer 1

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

当单击svg时，请将此svg包装成可调整大小的div并将svg的width和height属性设置为'100％'，因此{{1 }}将获得包装器的尺寸。
然后，当调整svg的大小时，div也将被调整大小。
当点击svg时，请明确设置div的width和height属性，然后删除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;
}

JS中与应用于SVG元素的调整大小CSS等效

1 个答案: