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')。

＆＃13;

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");

＆＃13;

<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>

＆＃13;

或者vanilla javascript：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

或者，如果你真的想使用jQuery，这个解决方法似乎从jQuery 1.4开始工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

将图像添加到svg

1 个答案: