Question

我正在创建一个用于基于用户输入参数创建SVG图形的javascript，我想添加一些可以接受数字输入和字符串输入的输入字段。想象一下：

Graph height: [600]
Background Color: [#dfe0ef]
...

^ ^{想象一下，不是括号，而是页面上的文本字段。}

我想知道是否应该为此使用表格。但是我不需要将任何数据发送到服务器，因此我想尽可能地坚持使用js。每当输入新值时，我确实需要在浏览器中更新SVG图。

到目前为止，我发现的所有示例都比我需要的复杂，因此很难将它们用作参考。因此，希望这里的人可以解释一下：一旦输入后，如何添加将更新脚本（并因此更新SVG）的输入字段？

谢谢

更新：我有一个使用DIV标签的概念验证。所以现在剩下的就是用SVG替换DIV并用更多参数填充它。

<!DOCTYPE html>
<html>
<body>

<p>Please specify a width, a height, and a background color.</p>

<p>Width:</p>
<input 
	id="i_width" 
	type="number" 
	min="1" 
	max="1024" 
	value="200"
	oninput="render()"
>
<br />

<p>Height:</p>
<input 
	id="i_height" 
	type="number" 
	min="1" 
	max="1024" 
	value="100" 
	oninput="render()"
>
<br />

<p>Background Color:</p>
<input
	id="i_bg_color" 
	type="text" 
	value="#bada55" 
	oninput="render()"
>

<p id="text_output"></p>
<br />
<div id="container_output"></div>

<script>
//Gets all variable values from input fields.
//Input IDs are "i_" + "var_name"
function render() {
  var width = document.getElementById("i_width").value;
	var height = document.getElementById("i_height").value;
	var bg_color = document.getElementById("i_bg_color").value;

//text_output
document.getElementById("text_output").innerHTML = "The width is " + width + ", and the height is " + height + ". The background color is " + bg_color + ".";

//container_output
document.getElementById("container_output").innerHTML = `
<div 
	style="
		width:${width}px;
		height:${height}px;
		background-color:${bg_color};
	">
</div>
`
}
</script>

</body>
</html>

Answer 1

您可以像这样在JavaScript中为oninput事件附加侦听器：

text_field_element.addEventListener('oninput', () => {
    //redraw 
}

其中text_field_element是某个<input>元素。

尽管没有看到有关实现的更多详细信息，但我不确定要重画实际的图形该说些什么，尽管附加了该侦听器会让您步入正轨。

Answer 2

这就是我要做的：

theHeight.addEventListener("input", () => {
  theRect.setAttributeNS(null, "height", theHeight.value);
});

svg{border:1px solid; width:90vh}

<svg viewBox="0 0 100 50">
     <rect id="theRect" x="20" y="10" width="60" height="30" fill="skyBlue" />
</svg>

<input id="theHeight" type="number" min="1" max="40" value="30" />

如何添加一旦输入值将更新的输入字段？

2 个答案: