javascript - 模式属性不起作用

Question

这是我的代码

pattern.setAttribute('id','test');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('width','10');
pattern.setAttribute('height','10');

在我使用过的相同代码中，

pattern.attr('id','test','id','test','patternUnits','userSpaceOnUse','width','10','height','10');

但它不起作用..如果我使用 setAtribute 设置单独的属性工作正常..如何解决这个问题。我想在单行中设置属性。请找到 jsfiddle 链接 http://jsfiddle.net/ubLr4/18/

Answer 1

没有原生 DOM 函数可以一次性设置多个属性，并且 jQuery 的 attr 不适合您的 SVG 元素，因为它使属性名称变为小写。不过，您可以轻松添加自己的函数来执行与 jQuery 的 attr 相同的操作，而无需小写:

function setAttributes(element, attrs) {
    var name;
    for (name in attrs) {
        if (attrs.hasOwnProperty(name)) {
            element.setAttribute(name, attrs[name]);
        }
    }
    return element;
}

用法:

setAttributes(pattern, {
  id:'test',
  patternUnits: 'userSpaceOnUse',
  width: '10',
  height: '10'
});

Updated Fiddle

在大多数浏览器(所有现代浏览器)上，您甚至可以将其添加到 SVGElement 原型(prototype)中:

SVGElement.prototype.setAttributes = function setAttributes(attrs) {
    var name;
    for (name in attrs) {
        if (attrs.hasOwnProperty(name)) {
            this.setAttribute(name, attrs[name]);
        }
    }
    return this;
};

用法:

pattern.setAttributes({
  id:'test',
  patternUnits: 'userSpaceOnUse',
  width: '10',
  height: '10'
});

Updated Fiddle