动态扩展SVG

Question

我正在一个网站上工作，用户可以通过几个文本框操作SVG图像。 我想让SVG比例适合容器div。

例如，如果SVG正好是容器的高度和10像素宽，那么将高度加倍会导致表观宽度为5像素。

我的页面大致分成两半，左边的数字和右边的图像。因此，调整浏览器大小会导致SVG的容器元素改变形状，这意味着我无法对SVG中容器的尺寸进行硬编码。

我在网上找到的每个解决方案都使用viewBox属性;但是，如果没有硬编码的容器大小，我无法找到应用方法。

这是我的编辑器设置的小提琴：

https://jsfiddle.net/xyjs5b63/

Answer 1

var rect = document.querySelector('rect');
var svg = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_elem = inputs[0];
var width_elem = inputs[1];

height_elem.value = '100';
width_elem.value = '100';

height_elem.addEventListener("change", valueChange);
width_elem.addEventListener("change", valueChange);

function valueChange() {
max = parseInt(height_elem.value) >= parseInt(width_elem.value) ? 'h' : 'w';
if (max == 'h') {
	rect.setAttribute('height', "100%");
	rect.setAttribute('width', (width_elem.value * 100 / height_elem.value)+"%");
}
else {
	rect.setAttribute('width', "100%");
	rect.setAttribute('height', (height_elem.value * 100 / width_elem.value)+"%");
}
}

valueChange();

#main {
width: 100%;
padding: 0;
}

#in {
float: left;
width: 40%;
height: 100%
}

#out {
margin: 10%;
width: 20vw;
height: 20vw;
}

svg {
  width: 100%;
  height: 100%;
}

<div id="main">
<div id="in">
    Height: <input type="number"><br>
    Width: <input type="number">
</div>
<br>
<div id="out">
    <svg height="auto">
    <rect></rect></svg>
</div>
</div>

这会解决您的问题吗？

Answer 2

调整viewBox听起来就像你想要的那样。我不确定你做了什么使它无效。

var svg = document.querySelector('svg');

var inputs = document.querySelectorAll('input');

var height_elem = inputs[0];
var width_elem = inputs[1];

height_elem.value = '100';
width_elem.value = '100';

height_elem.addEventListener("change", valueChange);
width_elem.addEventListener("change", valueChange);

function valueChange() {
    svg.setAttribute('viewBox', "0 0 "+width_elem.value+" "+height_elem.value);
}

valueChange();

#out {
    width: 100px;
    height: 100px;
    background-color: honeydew;
}

svg {
  width: 100%;
  height: 100%;
}

<div id="main">
    <div id="in">
        <input type="number"><br>
        <input type="number">
    </div>
    <div id="out">
        <svg>
            <rect width="100%" height="100%"></rect>
        </svg>
    </div>
</div>