Issue
Hi all I have the following code and I would like to place the javascript button inside the SVG box. 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>
Solution
There are two issues:
1- type = Javascript you need to add the property with double qoutetion or remove the type attribute. so you can use <script> or <script type="javascript"
2- don't write the html between script tags.
<!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>Answered By - Hossein Shourabi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.