动态缩放 SVG答案

【问题标题】：Dynamically Scaling SVG动态缩放 SVG
【发布时间】：2017-01-25 23:55:07
【问题描述】：

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

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

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

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

这是我的编辑器设置：

https://jsfiddle.net/xyjs5b63/

【问题讨论】：

标签： html css svg

【解决方案1】：

调整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>

【讨论】：

【解决方案2】：

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>

这能解决您的问题吗？

【讨论】：