等效于应用于SVG元素的调整css大小的JS
提问于 2019-01-09 06:07:49
我最近发现CSS调整了大小：
div {
resize: both;
overflow: auto;
}‘也有一个polyFill，但是没有一个不适用于SVG元素:/
至少有可能吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-09 15:42:18
从您的代码和@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54112004
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
