We Keep Coding

Is it possible to target a specific path in svg that has the fill attribute setted using javascript?

Good day all, I've a page in which I inject some svg elements, they look like this:
<svg>
<path fill="#FFFFFF" d='....'></path>
<path d='....'></path>
<path d='....'></path>
<path d='....'></path>
</svg>
I cannot alter the svg files that are injected using a javascript library, and I'd like to change their background color on the fly, is there a way to target the only path that has the fill attribute setted to something?

you can use hasAttribute whether element have a particular or not
document.querySelectorAll('.svg path').map( o=>
if(!o.hasAttribute('fill')) {
o.setAttribute('fill', '#eee')
}
);

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?

Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?

Say I want to programmatically insert an additional <tspan> in the <text> element in the following SVG:
<svg width="300" height="500">
<text x="50" y="100">
<tspan x="50">one</tspan>
<tspan x="50" dy="20">two</tspan>
<tspan x="50" dy="20">three</tspan>
</text>
</svg>
This can be done with, among other things, pure JavaScript (.appendChild), jQuery (.append), and d3.js (.append). However, although all three methods successfully insert the element, I can only seem to get it to actually display when it's inserted by d3.js:
See reduced case in this fiddle: http://jsfiddle.net/2NLJY/.
The behaviour is consistent across the browsers I've tested: Firefox, Chrome, and Safari (all OS X 10.8).
What is going on here?

You can't use createElement to create SVG elements. SVG elements must be created in the SVG namespace so you need to write
document.createElementNS("http://www.w3.org/2000/svg", "tspan");
There is a jquery plugin which adds functionality to jquery allowing svg elements to be created.

How to make a g element in an SVG clickable

I understand that it is a grouping for transformations. I have also looked through the documentation and have found nothing regarding this, but was wondering whether it is possible.

Fill it with a <rect width="whatever the <g> width is" height="whatever the <g> height is"/> and make the <rect> clickable. The rect can be transparent check out the pointer-events property for how to configure clicability of the <rect>.
You can find the <g> height and width by calling getBBox.

Assign id to element, and listener.
Ex.
<g id="clickg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/><g>
$("#clickg").on("click",function () {
alert("click");
});

Super old question but it helped me out so I want to expand on one of the answers with a little more of a step-by-step guide and some more details. This is the method I made when my group was several disconnected items and I wanted the whole area including the blank areas in between to be clickable.
Get the x/y/width/height of the <g> element, you can do this easily in chrome dev tools by selecting the <g> element and entering $0.getBBox() in the console.
Create a new element as a child of your <g> like so: <rect x="TODO" y="TODO" width="TODO" height="TODO" style="pointer-events: all" />
Replace the TODO above with the info from getBBox

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.