Question

我有几个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>

Answer 1

请尝试此功能：

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是一个好习惯; svg.id='mySVG'。

SVG在Click上显示文本描述

1 个答案: