CODEWITHSUNDEEP
javascripthtmlsvg
B Seven
B Seven

Reputation: 45943

How to create a clickable shape with SVG and Javascript?

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src='draw.js'></script>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200"></svg>
</body>

</html>

draw.js

function draw() {
    var svg = document.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;

    var rect = document.createElementNS(svgNS,'rect');
    rect.setAttribute('x',5);
    rect.setAttribute('y',5);
    rect.setAttribute('width',100);
    rect.setAttribute('height',36);
    rect.setAttribute('fill','#95B3D7');

    var link = document.createElement('a');
    link.setAttribute('xlink:href', 'http://www.google.com');
    link.appendChild(rect);
    svg.appendChild(link);
}

$( document ).ready( draw );

The generated HTML looks correct, but the rectangle does not appear:

<a xlink:href="http://www.google.com"> <rect x="5" y="5" width="100" height="36" fill="#95B3D7"></rect> </a>

In fact, the generated HTML does work, when pasted into an HTML file. So, is there some limitation of the browser using SVG, Javascript and links?

Using Chrome 39.

Upvotes: 2

Views: 660

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

You need to create an SVG link element and not a html link element i.e. in the SVG namespace 

var link = document.createElementNS(svgNS, 'a');
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.google.com');

You get it right for the rect itself!

Upvotes: 2

Related Questions