Pattern атр не работает

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 без lowercasing, хотя:

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

Usage:

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