如何获得emdedded SVG图像

<embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"> </embed>如何获得emdedded SVG图像

我想引起触发事件，鼠标点击的onclick工作。
上述工作，如果我使用onload和onmouseover，但不onclick或onmouseup/down。

有什么想法？

**编辑**

感谢海报。我正在寻找的代码是
onload="this.getSVGDocument().onclick = function(event){alert(333);};"

它克服了三个独立的问题。

加载svg文件时出现延迟，导致试图在尚不存在的svg文件上执行的代码出现问题。
onclick事件必须附加到svg元素。我不知道为什么，Tanzeels的帖子显示这个&我的实验证实了它。
我试图编写onclick =“alert（333）”的方式不起作用。以上是。我不知道为什么，但在这一点上，我只是乐于顺应潮流。

来源

2012-12-07 Matt Stevens

你有没有尝试过更像这样的东西：'onclick =“javascript：control.colorClothes（this）”' – renatoargh

不，但只是给了它一个。它没有效果。塔的建议虽然。 –

你可能不想，但尝试使用jQuery附加事件，看看是否有帮助 – kennypu

您需要将点击处理程序分配到SVG。请在以下的说法：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     function getClick(event) { 
      var clickedElement = event.target; 
      alert(clickedElement); 
      //console.log(clickedElement); 
      return; 
     } 

     function addClick() { 
      var embedObj = document.getElementById("bottom"); 
      embedObj.getSVGDocument().onclick = function (event) { 
       return getClick(event); 
      }; 
      return; 
     } 
    </script> 
</head> 
<body onload="addClick();"> 
    <embed id="bottom" src="img/model/skirt.svg" title="bottom" type="image/svg+xml" 
     width="628" height="709"></embed> 
</body> 
</html>

的event.target将返回被点击的SVG节点。

注意，这种做法将跨域SVG资源不工作作为浏览器将分配onclick事件处理程序时抛出permission denied错误。

来源

2012-12-07 05:57:50

感谢以上，它让我走上了实现我有三个问题的轨道。我会在上面的帖子中对它们进行详细说明，但答案是'onload =“this.getSVGDocument（）。onclick = function（event）{alert（333）;};”'非常感谢。 –

它可能是值得尝试将embed标签包装在一个div中，并把onclick处理程序。我不确定点击事件是否会冒泡到正常的DOM中，但是如果他们这样做，那么你应该没问题。像这样：

<div onclick="control.colorClothes(this)"><embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"></embed></div>

来源

2012-12-07 04:33:29

也注意到，如果你调用control.colorClothes（this），那么该函数将不会被称为“控制”对象的方法，它将被称为独立函数。如果你想引用控制对象的其他成员，你需要以某种方式绑定它，或者将函数中的onclick处理程序包装起来，或者使用像jquery这样的库来将处理程序绑定到方法。 –

它肯定似乎与使用svg有关，但是为什么onmouseover工作，但不是onmousedown或onclick。我试过使用div标签和一个新的独立测试函数（即：不是对象方法），仍然无法正常工作。 –

如何获得emdedded SVG图像

回答

相关问题