SVG顯示文字描述點擊

我點了幾個SVG圖形，當它們中的一個被點擊時，我怎樣才能讓一些文字出現在我在圖形下面創建的繪圖區域中。SVG顯示文字描述點擊

<script type='text/javascript'> 
/* setup the svg drawing area -- don't modify */ 
var svgWidth = 600; 
var svgHeight = 600; 
var ns = 'http://www.w3.org/2000/svg'; 
var svg = document.createElementNS(ns, 'svg'); 
svg.setAttribute('style', 'border: 1px solid black;'); 
svg.setAttribute('width', svgWidth); 
svg.setAttribute('height', svgHeight); 
document.body.appendChild(svg); 

</script>

因此，例如，如果我點擊形狀1，文字「這是形狀1」出現在繪圖區域，等等。

這是我的所有代碼：

<!doctype html> 

<html> 
<head> 
<meta charset='utf-8'> 
<title>Interactive Map</title> 
</head> 

<body> 
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 

<g> 
    <title>QMUL Campus</title> 
    <rect id="mile_end_road" height="34" width="623" y="377" x="10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"> 
    <title>Mile End road</title> 
</rect> 
    <rect id="bancroft_road" height="370" width="28" y="-7" x="182" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"> 
    <title>Bancroft Road</title> 
    </rect> 
    <path id="people_palace" d="m128,375l0,-78l52,0l0,67l31,0l0,-85l54,0l0,88l42,0l0,-80l37,0l0,-28l29,0l0,28l0,90l-59,0l-186,-2z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"> 
    <title>People Palace</title> 
    </path> 
    <path id="godward_square" d="m74,377l0,-141l34,0l0,-29l35,0l0,28l19,0l0,33l21,0l0,28c0,0 -60,2 -59,2c1,0 0,78.02563 0,78c0,-0.02563 -50,1 -50,1z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"> 
    <title>Godward Square</title> 
    </path> 
</g> 

<script type='text/javascript'> 

/* mouse-interaction with SVG objects */ 

function unselectedColour(evt) { 
    var target = evt.target; 
    target.setAttributeNS(null, 'fill', 'white'); 
    target.setAttributeNS(null, 'transform', "translate(0 0)"); 

    } 

function selectedColourBuilding(evt) { 
    var target = evt.target; 
     target.setAttributeNS(null, 'fill', 'purple'); 
     target.setAttributeNS(null, 'transform', "translate(-3 -3)"); 

} 

function selectedColourRoad(evt) { 
    var target = evt.target; 
    target.setAttributeNS(null, 'fill', 'grey'); 
      target.setAttributeNS(null, 'transform', "translate(2 3)"); 

} 



var myMile = document.getElementById('mile_end_road'); 
myMile.addEventListener('mouseover', selectedColourRoad, false); 
myMile.addEventListener('mouseout', unselectedColour, false); 

var myBancroft = document.getElementById('bancroft_road'); 
myBancroft.addEventListener('mouseover', selectedColourRoad, false); 
myBancroft.addEventListener('mouseout', unselectedColour, false); 

var myPalace = document.getElementById('people_palace'); 
myPalace.addEventListener('mouseover', selectedColourBuilding, false); 
myPalace.addEventListener('mouseout', unselectedColour, false); 

var mySquare = document.getElementById('godward_square'); 
mySquare.addEventListener('mouseover', selectedColourBuilding, false); 
mySquare.addEventListener('mouseout', unselectedColour, false); 



</script> 


</svg> 

</body> 
<footer> 
<script type='text/javascript'> 
/* setup the svg drawing area -- don't modify */ 
var svgWidth = 600; 
var svgHeight = 600; 
var ns = 'http://www.w3.org/2000/svg'; 
var svg = document.createElementNS(ns, 'svg'); 
svg.setAttribute('style', 'border: 1px solid black;'); 
svg.setAttribute('width', svgWidth); 
svg.setAttribute('height', svgHeight); 
document.body.appendChild(svg); 

</script> 
</footer> 
</body> 
</html>

來源

2014-02-15 AbbenGabben

請嘗試這個功能：

function addText(txt) { 
    var ns = 'http://www.w3.org/2000/svg'; 
    var t = document.createTextNode(txt); 
    var e = document.createElementNS(ns, "text"); 
    e.setAttributeNS(null, "x", "20"); 
    e.setAttributeNS(null, "y", "20"); 
    e.setAttributeNS(null, "fill", "blue"); 
    e.setAttributeNS(null, "text-anchor", "start"); 
    e.appendChild(t); 
    if (svg.firstChild) { // remove previous text 
     svg.removeChild(svg.firstChild); 
    } 
    svg.appendChild(e); 
}

並添加onclick事件處理程序到您的SVG形狀對象：

onclick="addText('This is Shape 1!')"

其它

您關閉<body>標籤的兩倍。
這是一個很好的做法，有一個ID爲您的SVG; svg.id='mySVG'。

來源

2014-02-15 17:37:40 user2845946

嗨，謝麗，謝謝你的回覆！當我將'onclick ='addText（'This is Mile end road！'）'添加到我的代碼中時，更改顏色的鼠標懸停事件停止工作。而且它不顯示文本 – AbbenGabben

謝謝太多了！它現在完美運行！ – AbbenGabben

SVG顯示文字描述點擊

回答

相關問題