相关疑难解决方法(0)

我有一个结构:

<div id="div">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
        <image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
    </svg>
</div>

我想得到pic.jpg网址,我需要从最外层的div开始,而不是完全来自source <image>元素:

var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href');   // Please pay attention I do not use getAttributeNS(), just usual getAttribute()

alert(url);     // pic.jpg, works fine

我的问题是从SVG及其子元素等元素中获取此类属性的正确方法是什么？

因为在我尝试这种方式之前它在Chrome中运行良好(我没有尝试其他浏览器):

var svg = div.getElementsByTagName('svg')[0];   // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href');  // and do not …

我是从JavaScript动态创建SVG元素.它适用于像矩形这样的可视对象,但是我在生成正常运行的xlink时遇到了麻烦.在下面的示例中,第一个矩形(静态定义)在单击时正常工作,但另外两个(在JavaScript中创建)忽略了点击...即使检查Chrome中的元素似乎显示相同的结构.

我已经看到了多个类似的问题,但没有一个能够解决这个问题.我发现最接近的是[ 通过JS在svg中添加图像命名空间仍然没有向我显示图片 ]但是这不起作用(如下所述).我的目标是纯粹使用JavaScript,而不依赖于JQuery或其他库.

<!-- Static - this rectangle draws and responds to click -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag">
    <a xlink:href="page2.html" id="buttonTemplate">
        <rect x="20" y="20" width="200" height="50" fill="red" class="linkRect"/>
    </a>
</svg>

<script>
    var svgElement = document.getElementById ("svgTag");

    // Dynamic attempt #1 - draws but doesn't respond to clicks
    var link = document.createElementNS("http://www.w3.org/2000/svg", "a");  // using http://www.w3.org/1999/xlink for NS prevents drawing
    link.setAttribute ("xlink:href", "page2.html");  // no improvement with setAttributeNS
    svgElement.appendChild(link);

    var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    box.setAttribute("x", 30); 
    box.setAttribute("y", 30);
    box.setAttribute("width", 200); …