将图像添加到 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> into 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>

将图像添加到 svg

Adding an Image to svg

javascript

jquery

svg

image