Javascript svg路径的onclick文本内容应更改_Javascript_Html_Svg

Javascript svg路径的onclick文本内容应更改

javascript html svg

Javascript svg路径的onclick文本内容应更改,javascript,html,svg,Javascript,Html,Svg,我正在学习svg元素的基本知识。在我的网页中，我想在四个自定义形状的按钮之间显示一个图像。对于我选择svg的自定义形状，我创建了按钮并将它们与链接一起放置。现在的问题是，当我点击它们时，所有按钮上的文本内容都应该改变在函数chngText（）中使用DOM，我可以更改文本，直到单击“确定”弹出警报。单击“确定”后，文本将更改为以前的正常文本 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte

我正在学习svg元素的基本知识。在我的网页中，我想在四个自定义形状的按钮之间显示一个图像。对于我选择svg的自定义形状，我创建了按钮并将它们与链接一起放置。现在的问题是，当我点击它们时，所有按钮上的文本内容都应该改变

在函数chngText（）中使用DOM，我可以更改文本，直到单击“确定”弹出警报。单击“确定”后，文本将更改为以前的正常文本

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style3.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
    <script type="text/JavaScript" src="cordova.js"></script>
    <script type="text/JavaScript" src="index.js"></script>
    <script type="text/JavaScript" >
    function chcT(color) {
    document.getElementById('a').style.fill= color;}
    function chcH(color) {
    document.getElementById('b').style.fill= color;}
    function chcE(color) {
    document.getElementById('d').style.fill= color;}
    function chcO(color) {
    document.getElementById('c').style.fill= color;}
    function chngText() {
   document.getElementById('tel').textContent= "kakada Aarthi";
 alert('x');

    }
</script>
</head>
<body>
  <div >

    <svg width="600" height="600" viewbox="100 0 600 600">
    <g id="buttons">
        <defs>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
            </filter>
        </defs>
        <!-- path for shape -->
        <a xlink:href="" onclick="chngText()"  >
        <path id="a" d="M200,200
         C200,100 200,100 300,100 L300,150 C250,150 250,150 250,200 z" style="stroke:skyblue; stroke-width:5; fill: red; filter="url(#f1)"" />
         <defs><!--path for text in shape -->
            <path id="TelTxtPath"
            d="M230,180
             C230,130 230,130 300,130"/>
        </defs>
        <defs><!--path for text in shape -->
            <path id="TelTxtPath1"
            d="M230,180
             C230,130 230,130 300,130"/>
        </defs>
        <text x="-4" y="30" textLength="20" style="font-size:16; font-family: arial; stroke: white; fill:black" onmouseover="chcT('springgreen')" onmouseout="chcT('red')" >
            <textPath id="tel" xlink:href="#TelTxtPath" >Telugu Aarthi</textPath>
        </text></a>
        <a xlink:href="http://www.google.com">
         <path id="b" d="M320,100
         C420,100 420,100 420,200 L370,200 C370,150 370,150 320,150 z" stroke="skyblue" stroke-width="5" fill="orange" filter="url(#f1)"/>
         <defs>
            <path id="HindiTxtPath"
            d="M330,130
             C390,130 390,130 390,185"/>
        </defs>
        <text x="10" y="40" textLength="40" style="font-size:16; font-family: arial; stroke: black; fill:white; letter-spacing: 1" onmouseover="chcH('springgreen')" onmouseout="chcH('orange')">
            <textPath xlink:href="#HindiTxtPath" >Hindi Aarthi</textPath>
        </text></a>
        <a xlink:href="http://www.google.com"> 
        <path id="c" d="M420,220
         C420,320 420,320 320,320 L320,270 C370,270 370,270 370,220 z" stroke="skyblue" stroke-width="5" fill="blue" filter="url(#f1)"/>
         <defs>
            <path id="OptionsPath"
            d="M390,230
             C390,290 390,290 330,290"/>
        </defs>
        <text x="10" y="40" textLength="40" style="font-size:16; font-family: arial; stroke: black; fill:white; letter-spacing: 4" onmouseover="chcO('springgreen')" onmouseout="chcO('blue')">
            <textPath xlink:href="#OptionsPath" >Options</textPath>
        </text></a>
        <a xlink:href="http://www.google.com">
        <path id="d" d="M300,320
         C200,320 200,320 200,220 L250,220 C250,270 250,270 300,270 z" stroke="skyblue" stroke-width="5" fill="#66ff00" filter="url(#f1)"/>
         <defs>
            <path id="EnglishTxtPath"
            d="M280,290
             C230,290 230,290 230,240"/>
        </defs>
        <text x="-5" y="40" textLength="40" style="font-size:15; font-family: arial; stroke: white; fill:black; letter-spacing: 0" onmouseover="chcE('springgreen')" onmouseout="chcE('#66ff00')">
            <textPath xlink:href="#EnglishTxtPath" >English Aarthi</textPath>
        </text></a>

    </g>
    </svg> 
</div>
<div height="600" width="600">
    <img id="shape" src="C:\Users\naani\Downloads\App logo.png" />
</div>
<!-- <audio autoplay loop type="audio/mpeg" id="sai" src="C:\Users\naani\Downloads\Music\Madhyan aarti\002_Aarti Saibaba_128kbps.mp3" /> -->

</body>
</html>

您正在单击带有空

xlink:href

属性的链接–这将使浏览器重新加载当前文档，但由于您正在单击处理程序中调用

alert

，因此重新加载将被推迟，直到您单击掉警报消息。研究如何防止链接上单击事件的默认操作。@CBroe非常感谢CBroe，我在空白处放置了#符号。现在是动态更新文本。再次非常感谢。@CBroe还有一件事CBroe，我希望新输入的文本应该在形状内，即使我输入了长单词，它应该在形状内的一行中自动调整。提前谢谢

@-webkit-keyframes mymove {
100% {box-shadow: 5px 3px 5px 20px yellow;}
 } 
svg {
position: relative; 
}
svg path:hover {
fill: springgreen !important;
}

img {
position: absolute;
margin-left:270px;
margin-top:-435px;
display: block;
height: 75px ; width:75px;
-webkit -animation: mymove 5s infinite;
animation: mymove 5s infinite;
border-radius: 10%;
border-style: groove;
}   
body {
background-color: springgreen;}