I'm using D3 to load existing SVG images onto my SVG.
If I were to create my own elements, I can easily edit their stroke/fill, etc.
However with image elements, I do not seem to be able to edit them. For example something like this:
<image height="32" width="32" xlink:href="some.svg" x="10" y="20"></image>
Attempting to change its properties with D3 has no effect at all. For example if I add it as such:
svg.append('svg:image')
.attr('height', SYMBOL_SIZE)
.attr('width', SYMBOL_SIZE)
.attr('xlink:href', "some.svg")
.style('stroke', 'blue')
.style('fill', 'blue')
.style('cursor', 'move')
It accepts my x, y, height, width and cursor attrs/styles, but completely ignores the fill/stroke. I also can't add a border.
Is there any way to work around this?
I was able to solve this issue by importing the image I needed using d3.xml()
This example grabs tux and gives him some nice pink lipstick.
d3.xml "http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg", "image/svg+xml", (xml) ->
importedNode = document.importNode(xml.documentElement, true)
svg.node().appendChild(importedNode.cloneNode(true))
svg.selectAll('#path119').style fill: 'pink', stroke: 'red'
svg.selectAll('#path120').style fill: 'red', stroke: 'pink'
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments