Question

我在单独的div中有几个svg。

<div id="divA">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
     <rect x="10" y="10" height="130" width="500" style="fill: #000000"/>

     <image class="myImg" x="20" y="20" width="300" height="80"
     xlink:href="img.png" />
   </svg>
</div>

所以基本上我正在寻找一种方式来访问divA中的图像。如何在javascript或jquery中访问img.png？

Answer 1

您可以通过以下方式之一进行操作。

如果你想使用div的id

alert($("#divA image").attr("xlink:href"));

否则使用图像元素的类

alert($(".myImg").attr("xlink:href"));

请找到jsfiddle http://jsfiddle.net/7n9erkuy/

Answer 2

怎么样：

// i'm assume you did this with on click event
$('#divA').click(function(){

 var img = $(this).find('.myImg').attr('xlink:href');
 // do whatever you want with this value
});

如果#divA是动态创建的，那么使用它（我只是提供一个选项，以防万一）：

// i'm assume you did this with on click event
$(document).on('click','#divA', function(){

 var img = $(this).find('.myImg').attr('xlink:href');
 // do whatever you want with this value
});

或者你可以像这样直接访问图像值：

var img = $('#divA .myImg').attr('xlink:href');

或存储元素本身：

var img = $('#divA .myImg');
// then access it attributes like :
// img.attr('x'); or img.attr('width');

最后，在获得这些值后，将其分配给另一个img，如下所示：

// this `#myNewImage` assumed you have html element with that name
$('#myNewImage').attr('xlink:href', img);

从div外部访问图片

2 个答案: