Question

I have a series of <circle> that are dynamically positioned through an algorithm in an <svg>. I want to add an icon next to every circle, I’m trying to do it through :

.node:after {
      content:url(/img/icon.png);
}

The selector is correct since I see it in Firebug but no icon shows. Am I trying to do something impossible ? Why don’t I see my icon somewhere ?

Extra question : is it possible to position this icon relatively to the center of the circle element.

Answer 1

We ignore generated content within SVG markup in Firefox so you won’t be able to do this this way. You’d have to create <image> elements using javascript.

The SVG specification does not mention :before and :after. It really only makes sense in html where you have relative positioning so the next item is automatically positioned after the previous one and not in SVG where everything is absolutely positioned.

You’d have to try other browsers to see if it worked there but I don’t really see how they could implement it sensibly.