Pattern attr is not working

Question

Here is my code

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

in same code i have used like this,

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

but it's not working.. if i set the individual attribute using setAtribute working fine.. how to solve this. i want set attribute in single line. please find the jsfidle link http://jsfiddle.net/ubLr4/18/

I think jquery lowercases everything and SVG is case sensitive. You'll have to write your own library function or modify jquery. — Robert Longson, Apr 28 '15 at 06:33
The jQuery version doesn't really accept an umlimeted amount of arguments, but you could pass in a map instead. — adeneo, Apr 28 '15 at 06:33
Refer below link: http://stackoverflow.com/questions/16422675/is-it-possible-to-set-multiple-data-attributes-using-the-jquery-attr-function — Bharathi, Apr 28 '15 at 06:39

T.J. Crowder · Accepted Answer · 2015-04-28T07:00:07.743

There's no native DOM function that sets multiple attribute in one go, and jQuery's attr wouldn't be appropriate for your SVG element because it makes the attribute names lowercase. You can readily add a function of your own to do the same thing as jQuery's attr without lowercasing, though:

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

On most browsers (all modern ones), you could even add that to the 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;
};

Usage:

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

Updated Fiddle

@RobertLongson: Thank you for keeping Rory and I on our toes re the SVG thing and attribute casing. V. much appreciated. — T.J. Crowder, Apr 28 '15 at 06:48

Pattern attr is not working

1 Answers1