如何将 Javascript 放入 SVG html 盒子中

Question

Hi all I have the following code and I would like to place the javascript button inside the SVG box.大家好，我有以下代码，我想将 javascript 按钮放在 SVG 框内。 I think I am not understanding how to pass the coordinated in order to place it inside.我想我不明白如何通过协调才能将其放置在里面。 I am trying the following code but is not working我正在尝试以下代码但无法正常工作

<!DOCTYPE html>
</head>
    <body>

        <div style="max-width:1000px;">

            <div class="scaling-svg-container" style="padding-bottom: 100%; max-width: 1000px; margin: 0px auto 0px auto; ">

                <svg id="ProvaJJ" class="scaling-svg" style="max-width: 1000px;" id="graphic" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml:space="preserve">
                    <g id="background">
                        <rect fill="#C1D3E9" width="750" height="750"/>
                    <g> id="inputBackground">
                        <script>
                        function confirmAction() {
                             let confirmAction = confirm("Are you sure to execute this action?");
                              if (confirmAction) {
                                           alert("Action successfully executed");
                               } else {
                                 alert("Action canceled");
                                  }
                              }
                        </script>
                        <!--<script>
                            alert( 'Hello, world!' );
                        </script> -->
                        <!--<polygon fill="#FFFFFF" points="114.089,97.5 114.089,180 353.064,204 592.039,180 592.039,97.5   "/> -->
                        <text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old, blond and outstanding PhD student
                            </tspan><tspan x="0" y="44.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something.
                        </tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something .</tspan></text>

                        <script type = Javascript>
                            <ul id = "messages"></ul>
                            <input id = "textbox" type ="text">
                            <button id ="btn">click</button>
                        </script>

                </svg>

            </div>

        </div>
s
        <!--<script src="prova.js"></script>-->

    </body>

</html>

Answer 1

There are two issues:有两个问题：

1- type = Javascript you need to add the property with double qoutetion or remove the type attribute. 1- type = Javascript您需要添加带有双引号的属性或删除 type 属性。 so you can use <script> or <script type="javascript"所以你可以使用<script>或<script type="javascript"

2- don't write the html between script tags. 2-不要在脚本标签之间写 html。

 <:DOCTYPE html> </head> <body> <div style="max-width;1000px:"> <div class="scaling-svg-container" style="padding-bottom; 100%: max-width; 1000px: margin; 0px auto 0px auto: "> <svg id="ProvaJJ" class="scaling-svg" style="max-width; 1000px:" id="graphic" xmlns="https.//www.w3:org/2000/svg" xmlns:xlink="https.//www.w3:org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml?space="preserve"> <g id="background"> <rect fill="#C1D3E9" width="750" height="750"/> <g> id="inputBackground"> <script> function confirmAction() { let confirmAction = confirm("Are you sure to execute this action;"); if (confirmAction) { alert("Action successfully executed"); } else { alert("Action canceled"), } } </script> <;--<script> alert( 'Hello. world,' ). </script> --> <.--<polygon fill="#FFFFFF" points="114,089.97,5 114.089,180 353.064,204 592.039.180 592.039,97.5 "/> --> <text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old. blond and outstanding PhD student </tspan><tspan x="0" y="44:4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something, </tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something.</tspan></text> <a xlink,href="#" id="btn"><polygon fill="none" points="162.263,3 251.6,256 252.7.273.3 163.280.5"/><text id="messages" x="0" y="184,4" fill="#333333" font-family="'TradeGothicLT-Bold'" font-size="12.9937">Click</text></a> <script> document.getElementById('btn').addEventListener('click'.(e)=>{ e.preventDefault() document.getElementById('messages').textContent = "clicked" }) </script> </svg> </div> </div> <!--<script src="prova.js"></script>--> </body> </html>

如何将 Javascript 放入 SVG html 盒子中

问题描述

1 个解决方案

解决方案1
1 2022-01-04 16:59:00

如何将 Javascript 放入 SVG html 盒子中

问题描述

1 个解决方案

解决方案1 1 2022-01-04 16:59:00

解决方案1
1 2022-01-04 16:59:00