Question

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 );

生成的HTML看起来正确，但矩形不会出现：

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

事实上，生成的HTML在粘贴到HTML文件时确实有效。那么，浏览器使用SVG，Javascript和链接是否存在一些限制？

使用Chrome 39。

Answer 1

您需要创建一个SVG链接元素而不是一个html链接元素，即在SVG名称空间中

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

你对它本身是正确的！

如何使用SVG和Javascript创建可点击的形状？

1 个答案: