将onclick事件添加到SVG元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我在SVG教程中找到了此示例，该教程说明了如何将onclick事件处理程序用于SVG元素。看起来像下面的代码：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
  <script type="text/ecmascript"><![CDATA[
      function changerect(evt)
      {
        var svgobj=evt.target;
        svgstyle = svgobj.getStyle();
        svgstyle.setProperty ('opacity', 0.3);
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>
  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
        height='100' />
</svg>

但是，这似乎不起作用。当我单击该元素时，没有任何反应。

也许重要的是要提到我正在使用PHP从PHP脚本内部显示SVG的事实echo。另外，请注意，使用AJAX和将PHP脚本生成的内容带入页面XMLHttpRequest()。

这可能与它有关吗？非常感谢您的帮助。

回答：

似乎所有JavaScript都必须包含在SVG中才能运行。我无法引用任何外部函数或库。这意味着您的代码在svgstyle =

svgobj.getStyle();

这将完成您尝试的操作。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
  <script type="text/ecmascript"><![CDATA[
      function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>
  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>

以上是 将onclick事件添加到SVG元素 的全部内容， 来源链接： utcz.com/qa/433972.html

回到顶部