Question

在此文件中：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   id="svg2"
   height="40.2271"
   width="25.1">
  <rect
     style="fill:red"
     id="rect44"
     width="12.625"
     height="14.5"
     x="6.3289919"
     y="4.5130124" />
</svg>

当文件作为独立文件加载时，将触发load事件；在此处作为图像加载时，将触发bur事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
  <title>test</title>
</head>
<body>
  <img src="marker_so.svg">
</body>
</html>

它不再发射了。

那是为什么？并有一种方法可以在将事件加载为图像时在SVG文件中内部触发事件？

就我而言，我正在尝试触发一个函数，该函数根据从其加载的URL更改SVG文件内的某些颜色。

Answer 1

在SVG中监听图像加载事件：

<image xlink:href="example.png" width="10" height="10" 
       onload="alert('loaded')"/>

<script>
  var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
  img.addEventListener('load', function() { alert('loaded'); });
  // or alternatively:
  // img.onload = function() { alert('loaded'); }
  img.width.baseVal.value = 100;
  img.height.baseVal.value = 100;
  img.href.baseVal = "example.png";
</script>

示例：http://jsfiddle.net/ZXdxc/81/

SVG作为img元素的src加载时，load事件会触发吗？

1 个答案: