个人中心
gpt4 book ai didi

javascript - 如何通过输入字段使用JavaScript更改笔触宽度

转载 作者：行者123 更新时间：2023-11-28 03:36:20 24 4
gpt4 key购买 nike

我用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/

24 4 0
文章推荐： c++ - ROOT (cern) : gClient, gApplication
文章推荐： php - 奇怪的行为 - 允许访问 domain.in/file/file
文章推荐： c++ - 调整屏幕大小时消失的对象(OpenGl)
文章推荐： iphone - 是否可以让 iPhone 识别属于网页上电话号码的联系人姓名？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com