将图像添加到 svg答案

【问题标题】：Adding an Image to svg将图像添加到 svg
【发布时间】：2015-04-14 17:59:45
【问题描述】：

我正在尝试将图像添加到 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中定义的图像）。

谁能告诉我怎么做才对？

【问题讨论】：

标签： javascript jquery image svg

【解决方案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>

【讨论】：