我有几个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>
请尝试这个功能：
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>标签的两倍。svg.id='mySVG'。