你怎么知道SVG中指定的图像已满载?

时间:2014-03-05 19:51:39

标签: html5 svg

我的HTML标记中嵌入了以下SVG文档:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
      <circle cx=".5" cy=".5" r=".35" fill="white" />
    </mask>
  </defs>
  <image id="coverImage" xlink:href="/images/v3/eminem-cover.jpg" width="200" height="200" mask="url(#masking)" />
</svg>

我如何知道加载#coverImage的时间(即已从网络中检索到它?)通常您只需检查元素上的complete属性,但由于这不是HTMLImageElement,没有这样的财产。

1 个答案:

答案 0 :(得分:1)

SVG支持许多DOM事件,包括onload。

<image xlink:href="/images/v3/eminem-cover.jpg" ... onload="doSomething();" />

请参阅http://www.w3.org/TR/SVG/script.html