我无法获得MutationObserver仅对xlink:href元素上的<use>属性进行更改。我已将MutationObserver配置为仅监视DOM子树中任何位置的特定属性更改。以下是有关其工作原理的一些背景信息：
注意：此页面上的代码段可能需要一些时间才能加载，因为它们会启动MutationObservers
通过在MutationObserver的配置对象中指定要监视的属性，很容易只观察DOM中更改的特定属性。
attributeFilter: ['class']
通过执行上述操作，您只会在class属性更改时触发回调。这是一个更完整的示例，其中在div上更改了两个属性，但只有1个突变记录到控制台：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('Mutation Type:', mutation.type, 'Attribute:', mutation.attributeName);
});
});
observer.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['class']});
var myDiv = document.querySelector('#myDiv');
// Logs only one attribute changes (class)
myDiv.className = 'foo';
myDiv.dataset.test = 'foo';
console.log('One mutation will be logged:');<div id="myDiv"></div>
我尝试将属性xlink:href作为过滤器中的唯一项目，但当我没有看到任何突变记录时，我感到很惊讶。我甚至确保使用命名空间setAttribute调用（setAttributeNS(...)）：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
observer.observe(document.body, {
subtree: true,
attributes: true,
attributeFilter: ['xlink:href']
});
// change the use shape to a circle
document.querySelector('#shape').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#circle');
console.log('No mutations will be logged');<svg display="none">
<rect id="rect" height="30" width="30" fill="red"></rect>
<circle id="circle" r="15" cx="15" cy="15" fill="red"></circle>
</svg>
<svg>
<use id="shape" xlink:href="#rect"></use>
</svg>
我决定看看如果过滤器中没有任何内容，MutationObserver是否会记录更改，并且它确实：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mut) {
console.log(mut.type, mut.attributeName, mut.attributeNamespace);
});
});
observer.observe(document.body, {
subtree: true,
attributes: true
// Do not use the attributeFilter option
});
// change the use shape to a circle
document.querySelector('#shape').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#circle');
console.log('One mutation will be logged:')<svg display="none">
<rect id="rect" height="30" width="30" fill="red"></rect>
<circle id="circle" r="15" cx="15" cy="15" fill="red"></circle>
</svg>
<svg>
<use id="shape" xlink:href="#rect"></use>
</svg>
奇怪的是，attributeName只是href，但突变对象中存在attributeNamespace。所以我决定通过观察href更改来测试这个。
以下针对仅href属性更改的监视更改适用于<a>元素之类的内容，但仍然 识别<use>元素的更改：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
observer.observe(document.body, {
subtree: true,
attributes: true,
attributeFilter: ['href']
});
document.querySelector('#shape').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#circle');
console.log('No mutations will be logged');<svg display="none">
<rect id="rect" height="30" width="30" fill="red"></rect>
<circle id="circle" r="15" cx="15" cy="15" fill="red"></circle>
</svg>
<svg>
<use id="shape" xlink:href="#rect"></use>
</svg>
这是一个我不知道的svg＆s必须达到的命名空间问题吗？或者它是MutationObserver的错误？