javascript - 将图像添加到 svg

Question

我正在尝试将图像添加到 Javascript 中 svg 中的某个元素。我在努力

$( '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" />');
    });

...不显示我的元素。

如果我尝试

$( '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");
 });

它添加元素，但不是 <img> , 但作为 <g> (它不显示我在 href 中定义的图像)。

谁能告诉我怎么做才好？

Answer 1

问题来自 jQuery，它会解释你的 svg <image> 进入html <img> 元素。

jQuery是为html设计的，不是svg，有些操作像append()可能会失败。
Check this question

你应该更喜欢像 d3.js 这样的库这将使您能够 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>

或者普通的 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>

或者，如果你真的想使用 jQuery，这个变通办法似乎从 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>