Can't access an attribute

Question

I am having problem modifying an attribute of an HTML element using jQuery attr command. I have a script that inserts an SVG element with a child element that has the attribute stdDeviation. You can see that the D letter is capitalized.

When I try to get the attribute using

$("#myparentdiv feGaussianBlur").attr("stdDeviation"),

The attribute can't be retrieved because the attribute is not found. I try to set the stdDeviation attribute to lowercase in the code, but when I try to access it with lowercase, it shows in Internet Explorer 11 (debugging on this browser), that the attribute with the D as uppercase instead of lower case.

When I try to write the attribute, it put a second attribute with a lower case, so I get to have two of those attributes, one with a lowercase D and one with uppercase.

I don't know which to blame, jQuery or IE11 and can't seem to solve this. Any idea?

The Code (after setting the attribute):

<div id="some_id_1">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="t3">
        <feGaussianBlur stdDeviation="0" stddeviation="39" />
       </filter>
    </defs>
     <image filter="url(&quot;#t3&quot;)" x="0" y="0" width="350.048px" height="768.75px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/test1.png" />
 </svg>
 </div>

Trying to access it from code:

  $("#some_id_1 " + "feGaussianBlur").attr("stdDeviation", radius);

What it does: sets the attribute as lowercase instead of what I've wrote with uppercase. You can see that it shows twice after the update.

Is `feGaussianBlur` an ID or class? `$("#myparentdiv feGaussianBlur")` — showdev, Jul 28 '14 at 17:53
This might be helpful: [Dynamically Modifying An SVG Filter With Javascript](http://stackoverflow.com/questions/19129298/dynamically-modifying-an-svg-filter-with-javascript) — showdev, Jul 28 '14 at 18:01
I'd blame jquery - even in chrome this fiddle: http://jsfiddle.net/2zGtL/1/ doesn't return `feGaussianBlur` element — eithed, Jul 28 '14 at 18:01
Apparently jquery case folds the attribute names as well as selector ones - that's why the element is not being found (`feGaussianBlur` becomes `fegaussianblur`). As it's of a `wontfix` status I'd rely on modifying it via pure JS. — eithed, Jul 28 '14 at 18:12
@showdev the solution worked. You can reference the other answer as the answer and I will accept it. Thanks a lot everyone — Liron Harel, Jul 28 '14 at 18:14

score 2 · Answer 1 · answered Jul 28 '14 at 17:53

2

You need to make sure if feGaussianBlur is a class, that you select it this way (period in front):

$("#myparentdiv .feGaussianBlur").attr("stdDeviation")

If it is an ID, select it this way: (# in front)

$("#myparentdiv #feGaussianBlur").attr("stdDeviation")

Hope this helps!

answered Jul 28 '14 at 17:53

mdt0093

236
1
5

showdev's solution should fix your problem. Use regular javascript and not jQuery. – mdt0093 Jul 28 '14 at 18:05
Thanks a lot, I am chekcking it right now. Happy to know that I am not the first to tackle this issue – Liron Harel Jul 28 '14 at 18:07
If that doesn't work, let me know I will look at another solution. – mdt0093 Jul 28 '14 at 18:10

Can't access an attribute

1 Answers1