我用snap.svg创建了一条线，我想用输入字段来改变线的宽度。
我做了一个我认为应该起作用的功能，但是没有起作用。
这是我的代码的底部。 “ hallo（）”函数不应该工作吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inkscape Animated Icon Snap</title>
<!--We need to add the Snap.svg script to our document-->
<script src="snap.svg.js"></script>
<script>
//Run script right away
window.onload = function () {
var s = Snap("#LagerSvg");
Snap.load("lager2.svg", function(f) {
//Variablen + Elemente laden
A_PUF_RECT = f.select("#A_PUF_RECT");
A_PUF = f.select("#A_PUF");
A_VER_RECT = f.select("#A_VER_RECT");
A_VER = f.select("#A_VER");
A_WAR_RECT = f.select("#A_WAR_RECT");
A_WAR = f.select("#A_WAR");
A_KOM_RECT = f.select("#A_KOM_RECT");
A_KOM = f.select("#A_KOM");
A_PAL_RECT = f.select("#A_PAL_RECT");
A_PAL = f.select("#A_PAL");
A_MON_RECT = f.select("#A_MON_RECT");
A_MON = f.select("#A_MON");
A_NIO_RECT = f.select("#A_NIO_RECT");
A_NIO = f.select("#A_NIO");
A_AKL_RECT = f.select("#A_AKL_RECT");
A_AKL = f.select("#A_AKL");
//Animationen der Elemente
A_VER.hover(function() {
A_VER_RECT.attr({
fill: "red"
});
A_VER_RECT.animate({y:165.089, x:47.179, height:86.37, width:150.567}, 500, mina.elastic);
},
function() {
A_VER_RECT.animate({y:168.089, x:50.179, height:79.37, width:144.567}, 500, mina.elastic);
A_VER_RECT.attr({
fill: "#666666ff"
});
}
);
A_PUF.hover(function() {
A_PUF_RECT.attr({
fill: "red"
});
A_PUF_RECT.animate({y:46.034, x:276.785, height:233.772, width:139.228}, 500, mina.elastic);
},
function() {
A_PUF_RECT.animate({y: 49.034, x: 279.785, height: 226.772, width: 133.228}, 500, mina.elastic);
A_PUF_RECT.attr({
fill: "#666666ff"
});
}
);
A_WAR.hover(function() {
A_WAR_RECT.attr({
fill: "red"
});
A_WAR_RECT.animate({y:423.042, x:356.155, height:97.709, width:142.898}, 500, mina.elastic);
},
function() {
A_WAR_RECT.animate({y:426.042, x:359.155, height:90.709, width:138.898}, 500, mina.elastic);
A_WAR_RECT.attr({
fill: "#666666ff"
});
}
);
A_KOM.hover(function() {
A_KOM_RECT.attr({
fill: "red"
});
A_KOM_RECT.animate({y:224.616, x:761.51, height:80.701, width:306.472}, 500, mina.elastic);
},
function() {
A_KOM_RECT.animate({y:227.616, x:764.51, height:73.701, width:300.472}, 500, mina.elastic);
A_KOM_RECT.attr({
fill: "#666666ff"
});
}
);
A_PAL.hover(function() {
A_PAL_RECT.attr({
fill: "red"
});
A_PAL_RECT.animate({y:48.868, x:1172.53, height:128.89, width:181.748}, 500, mina.elastic);
},
function() {
A_PAL_RECT.animate({y:51.868, x:1175.53, height:121.89, width:175.748}, 500, mina.elastic);
A_PAL_RECT.attr({
fill: "#666666ff"
});
}
);
A_MON.hover(function() {
A_MON_RECT.attr({
fill: "red"
});
A_MON_RECT.animate({y:236.174, x:1165.84, height:210.4, width:190.347}, 500, mina.elastic);
},
function() {
A_MON_RECT.animate({y:239.174, x:1168.84, height:203.4, width:183.347}, 500, mina.elastic);
A_MON_RECT.attr({
fill: "#ce700b"
});
}
);
A_NIO.hover(function() {
A_NIO_RECT.attr({
fill: "red"
});
A_NIO_RECT.animate({y:372.018, x:775.683, height:58.024, width:89.205}, 500, mina.elastic);
},
function() {
A_NIO_RECT.animate({y:375.018, x:778.683, height:51.024, width:82.205}, 500, mina.elastic);
A_NIO_RECT.attr({
fill: "#666666ff"
});
}
);
A_AKL.hover(function() {
A_AKL_RECT.attr({
fill: "red"
});
A_AKL_RECT.animate({y:510.916, x:767.179, height:137.394, width:588.102}, 500, mina.elastic);
},
function() {
A_AKL_RECT.animate({y:513.916, x:770.179, height:130.394, width:581.102}, 500, mina.elastic);
A_AKL_RECT.attr({
fill: "#666666ff"
});
}
);
var L_PUF_WAR = s.path("m 338.57052,275.31046 v 110.41789 h 95.11902 v 39.24491").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 10
});
A_PUF.append(L_PUF_WAR);
var L_PUF_AUT = s.path("m 937.88689,516.10127 v -51.8831 H 573.37482 V 340.49692 H 391.11879 V 276.6408").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 15
});
A_PUF.append(L_PUF_AUT);
s.append(f);
});
};
</script>
</head>
<body>
<svg id="LagerSvg", width="1500", height="750"></svg>
<script>
function hallo(){
var number = document.getElementById("number").value;
if(number > 0){
L_PUF_WAR.strokeWidth = number;
}
}
</script>
<input type="text" id="number" name="number"/><br/>
<input type="button" value="breite" onclick="hallo()"/>
</body>
</html>
没有错误消息。仅当我将函数放在创建的行下时。
最佳答案
使用ID选择元素时，您错误地将值包含在参数中。像这样将值移到行尾。
还要确保您引用的是L_PUF_WAR对象，因为hallo函数中没有定义。
function hallo(){
var number = document.getElementById("number").value;
if(number > 0){
this.L_PUF_WAR.strokeWidth = number;
}
}
关于javascript - 如何通过输入字段使用JavaScript更改笔触宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57704506/