Search code examples
javascriptimagefirefoxsvgfirebug

svg image is added to DOM, but isn't *visible* unless touched in Firebug

I'm trying to add a feature to a webtoy I built. It uses raw javascript and SVG. The app has a bunch of functionality and is over a year old and lives at http://stereosketcher.com. My new feature is supposed to add an SVG <image> to a <g> when I drag an image file onto a special spot on the screen from the file system. I have the dragging and parsing and appending all done, but my image isn't appearing. It isn't that it isn't in the markup, it is in the markup, it's just that I can't see the image.

I would suspect some kind of layering or opacity issue or something, except that there are two weird tricks I can do to make the image appear:

  • Just copy the whole <image> element (xlink:href and all) into somebody else's SVG editor (like the 'try it' editor over at W3Schools)
  • Use Firebug to manually edit the markup and simply touch the last few characters of the <image> inserting a space or a carriage-return before the "/>" closing tag (removing the new character does not make the image disappear again)

The function to add it to the document looks like this:

function applyImageToFaces(data) {
    var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute("width","800");
    image.setAttribute("height","800");
    image.setAttribute("xlink:href",data);

    shapeGroup.appendChild(image);
}

Does anybody know what kind of behavior that is?

EDIT: It look like even when I replace 'data' with a plain link like this:

<image width="800" height="800" xlink:href="http://thumbs.ebaystatic.com/d/l225/m/m-EuLTQ6AWFEafDhXz9cujA.jpg"/>

It behaves in exactly the same way....

Solution

  • Welp. I found my answer: https://stackoverflow.com/a/26634735/2427417

    I had tried that before but I had left out the "http://" from the namespace because I was copying it from the comment on this answer: https://stackoverflow.com/a/12423019/2427417