Adding an Image to svg

Question

I am trying to add an image to a certain element within a svg in Javascript. I am trying

$( 'g.nv-label' ).each(function(i, obj){
      $( obj ).append('<image x="20" class="klasse" y="20" width="100" 
        height="100" xlink:href="http://goo.gl/IkKMb5" />');
    });

... which does not show my element.

If i try

$( 'g.nv-label' ).each(function(i, obj){  
      $( obj ).append("svg:image")
        .attr("xlink:href", "http://goo.gl/IkKMb5")
        .attr("height", 100)
        .attr("width", 100)
        .attr("class", "klasse");
 });

it adds the element, but not as a <img>, but as <g> (which does not show my image defined in the href).

Can anyone tell me how to do it right?

score 4 · Accepted Answer · edited May 23 '17 at 10:24

The problem comes from jQuery, which interprets your svg <image> into html <img> element.

jQuery is designed for html, not svg, some operations like append() may fail.
Check this question

You should rather prefer some library like d3.js which will allow you to append('image').

d3.selectAll("g.nv-label").append("svg:image")
  .attr("x", "20")
  .attr("y", "20")
  .attr("class", "klasse")
  .attr("width", "100")
  .attr("height", "100")
  .attr("xlink:href", "http://goo.gl/IkKMb5");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">
  <g class="nv-label" transform="translate(0,0)"  ></g>
  <g class="nv-label" transform="translate(120,0)"></g>
  <g class="nv-label" transform="translate(240,0)"></g>
</svg>

Or vanilla javascript :

var g = document.querySelectorAll('g.nv-label');
for (i = 0; i < g.length; i++) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'image');
  el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "http://goo.gl/IkKMb5");
  el.setAttributeNS(null, 'width', '100');
  el.setAttributeNS(null, 'height', '100');
  el.setAttributeNS(null, 'x', 20);
  el.setAttributeNS(null, 'y', 20);
  g[i].appendChild(el);
}

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">
  <g class="nv-label" transform="translate(0,0)"></g>
  <g class="nv-label" transform="translate(120,0)"></g>
  <g class="nv-label" transform="translate(240,0)"></g>
</svg>

Or, if you really want to use jQuery, this workaround seems to work since jQuery 1.4:

$( 'g.nv-label' ).each(function(i, obj){
      $( obj ).html($( obj ).html()+'<image x="20" class="klasse" y="20" width="100" height="100" xlink:href="http://goo.gl/IkKMb5" ></image>');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">
  <g class="nv-label" transform="translate(0,0)"></g>
  <g class="nv-label" transform="translate(120,0)"></g>
  <g class="nv-label" transform="translate(240,0)"></g>
</svg>

Adding an Image to svg

1 Answers1

Linked