We Keep Coding

Different behaviour updating SVG elements created with <use> tags in Chrome and Firefox

I've made a cut down version of the issue I'm having in the JSFiddle here.
I use d3.js to dynamically add SVG path elements with class symbol to the group with id grouped-shapes in the following defs tag:
<defs>
<g id="grouped-shapes">
...
</g>
</defs>
I then use this definition twice, once directly and once via a reference to the first use tag:
<g id="first-triangle">
<use xlink:href="#grouped-shapes" transform="translate(100, 100)"/>
</g>
<g id="second-triangle">
<use xlink:href="#first-triangle" transform="translate(200, 200)
rotate(30)"/>
</g>
(In this example case I could easily avoid the problem by working out everything as a transformation of the original grouped-shapes instead of doing this indirect transformation, but in my real use case this would be more complicated.)
I then set up an event listener to remove paths with class symbol on clicking the container div:
document.getElementById("kaleidoscope-container")
.addEventListener("click", function( event ) {
d3.selectAll(".symbol").remove();
}, false);
In Chrome, both groups update on clicking, but in Firefox only the first one does.
Which of these behaviours is correct? I'm looking to be able to update in both instances, as in Chrome - what is the correct way of going about this?

Overflow SVG does not register clicks on OSX/iOS

I have a small SVG canvas in my application which houses a button to click. Upon clicking that button, the small circle does some flashy work and opens up to an appropriate sized bubble to fit all the data. This data is just a list of data with custom bullets off to the left; some of this text is clickable (bound to click events) and causes other functions to be fired off. My problem is that the SVG canvas never changes in size. It's really only big enough to contain the original circle that the user clicks on. The rest of SVG elements that make up this control flow outside the bounds of the SVG canvas, but is all viewable due to the SVG having its overflow set to visible. Everything works fine in all browsers, but things change when I open up the application in an iPad or on a Mac (regardless of browser). It seems the overflow pieces of my SVG are completely invisible to the browser. Any click event that fires fine on the overflowed SVG elements on Window's browsers are completely invisible on OSX/iOS browsers (it seems like any click actually falls through to whatever is behind the overflowed SVG). At first I thought it was an issue with the click binding, but after searching and playing around with it, I think OSX/iOS just doesn't handle overflowed SVG very well.
To explain in its simplest form what's going on in my application, I have a very simple JSFiddle here: https://jsfiddle.net/yno8daka/
HTML:
<svg style="overflow: visible !important" class="canvas" width='70px' height='70px' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle id="circle1" stroke="black" fill="black" stroke-width="1" cx="10" cy="10" r="10"></circle>
<circle id="circle2" stroke="black" fill="black" stroke-width="1" cx="110" cy="110" r="10"></circle>
</svg>
Javascript:
$('#circle1').click(function() {
alert('yeah');
})
$('#circle2').click(function() {
alert('yeah2');
})
Circle1 is in the bounds of the SVG canvas, while circle2 is not. On Windows browsers, you will be able to click on both circles without any issue. On OSX/iOS browsers, the click event will fire for circle1, but not for circle2.
Does anyone know how to get this to work?

SVG clipPath not working in Firefox when defined dynamically

I have the following code:
<div class="blah" style="clip-path: url(#clippath)"></div>
<svg width="0" height="0"><defs><clipPath id="clippath">
<rect x="0" y="0" height="100" width="100"></rect>
</clipPath></defs></svg>
This correctly clips the blah div to 100x100 square. However, if I use JavaScript to add the svg to the DOM (rather than it being there from page load), it no longer works. Specifically, I'd like to create a dynamic clip path based on events happening in my app.
What am I doing wrong? This only needs to work in Firefox (which unfortunately doesn't support clip-path: polygon(...))

Make sure you are you using the namespace variant of createElement.
document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
If you are just using createElement() then the element will be going into the default namespace (ie HTML) and won't be recognised by the SVG renderer.

Sorting animated GIFs in SVG without stopping the animation using D3/JavaScript

My D3-based visualization produces an HTML5 SVG element with animated GIFs in it. For simplicity, take this example:
<svg>
<image href="animated.gif"></image>
<svg>
Upon mouseover, I'd like to highlight the image by putting a circle behind with a fading gradient for a glow effect. As SVG renders elements on top of each other, the output must look like this:
<svg>
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
<svg>
After two wasted days, I gave up trying to insert the circle element at the correct position immediately with D3's insert. It just didn't work, esp. since the visualization contains lots of other stuff and the insert position is hard to express.
So instead, I use D3's append to add the circle at the end. Then I call a sorter which removes all elements from the SVG, sorts them, and re-appends them in the correct order:
<svg>
<image href="animated.gif"></image>
<circle class="gloweffect"></circle>
<svg>
--> remove everything
<svg>
<svg>
--> sort and reinsert
<svg>
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
<svg>
And here comes the challenge: This works fine in all browsers, except ... wait for it ... IE9. (Okay, lame wait.)
As soon as the image element is removed, IE9 stops the GIF animation and does not restart or continue it upon reinsertion. The image simply gets stuck at the first frame and stays that way.
So my question: Is there a way to make IE9 continue the animation after reinsertion? I found plenty of old threads regarding regular img elements, esp. suggesting to reset the picture in a delayed thread, but none of them seems to work for the image element in SVG.
--Florian

Instead of inserting and removing elements (which is expensive and error prone) just make them invisible, you could do something such as...
<svg>
<g class="glow">
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
</g>
<svg>
And then in your CSS:
g.glow .gloweffect {
opacity: 0;
}
g.glow:hover .gloweffect {
opacity: 1;
}

Trying to create a re-usable text-box (text with a square background-colour) in SVG 1.1?

I'm trying to create (what I thought would be!) a simple re-usable bit of SVG to show three lines of text, with a background colour - to simulate a 'post-it' note.
I have found some useful code here to get the Bounds of the Text http://my.opera.com/MacDev_ed/blog/2009/01/21/getting-boundingbox-of-svg-elements which I am using.
So: I'm creating an group of text elements like this in the 'defs' section of my SVG:
<svg id="canvas" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="post_it">
<text x="0" y="30" id="heading" class="heading">My Heading</text>
<text x="0" y="45" id="description" class="description">This will contain the description</text>
<text x="0" y="60" id="company" class="company">Very Big Company Ltd.</text>
</g>
And I'm displaying the text with a 'use' element like this:
<use id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>
I'm using the onclick to trigger a call to the following javascript function (defined in 'defs' section):
function showId(elem) {
post_it_rect=getBBoxAsRectElement(elem);
document.getElementById('canvas').appendChild(post_it_rect);
}
(The 'getBBoxAsRectElement(elem)' is from the link I posted).
As this stands; this works just fine - however if I change my 'use' element to position the text in a different place like this:
<use x="100" y="100" id="12345" class="postit" xlink:href="#post_it" onclick="showId(this);"/>
Now, the text displays in the correct place, but the resultant 'background-color' (actually a 'rect' element with opacity of 0.5) still shows on the top-left of the svg canvass - and the function used to calculate the rect is returning '-2' rather than '100' ('-98'?) as I need (I think).
What do I need to do to line up the 'rect' elements and the text elements ?
The author of the (very helpful article btw) script provides a more advanced script to draw a box round any 'bb' in an SVG, but I couldn't get this to work (missing 'transform' functions?).
I'm using Firefox 7.x to render the SVG ; and I'm loading a .svg file (ie, not embedded in html etc) straight from disk to test this).

Yes, you may need to compensate yourself for the x and y attributes on the <use> element for the time being, I'll try to find some time to update the blogpost and script.
Here's a draft SVG 1.1 test that among other things checks that the effect of the x and y attributes are included in the bbox. The line starting [myUse] is the one that tests this case, if it's red then that subtest failed. Chromium and Opera Next both pass that subtest, while Firefox nightly and IE9 doesn't. Note that the test itself has not gone through full review yet, and that it may still change.