为什么getAttributeNS返回null

why is getAttributeNS returning null?

本文关键字:null 返回 getAttributeNS 为什么      更新时间:2023-12-22

var svg = document.getElementById('test'),
    use = svg.lastElementChild;
alert(use.getAttributeNS(null, 'x'));
// "200"
alert(use.getAttributeNS('http://www.w3.org/1999/xlink', 'href'));
// "#shape"
alert(use.getAttributeNS('http://foo.io/bar', 'foo'));  
// null - why?
<svg id="test"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:test="http://foo.io/bar">
    <defs>
        <g id="shape">
            <rect x="50" y="50" width="50" height="50" />
            <circle cx="50" cy="50" r="50" />
        </g>
    </defs>
    <use xlink:href="#shape" x="200" y="50" test:foo="bar" />
</svg>

查看MDN页面,会发现html5文档中不支持命名空间-https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttributeNS#Example

看起来您必须使用use.getAttribute('test:foo');