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设置单个属性工作正常..如何解决这个问题。我想在单行中设置属性。请找到jsfidle链接 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原型中：

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

模式attr不起作用

1 个答案: