Question

这与一些现有问题类似：

javascript, image onload() doesnt fire in webkit if loading same image

除了尝试加载html图像，我正在使用svg图像。我在页面上有一个SVG元素和一个包含数据URI字符串的变量。我想创建一个图像元素，将其设置为显示数据URI，并将其添加到页面上的SVG元素。这是我的代码：

var svg=document.getElementsByTagName('svg')[0]
var placed=document.createElementNS("http://www.w3.org/2000/svg", 'image')
placed.addEventListener('load',function(){
    alert('loaded')
})
placed.setAttribute("href",test)
placed.setAttribute("x",100)
placed.setAttribute("y",100)
placed.setAttribute("height",100)
placed.setAttribute("width",100)
svg.appendChild(placed);

test是数据URI。这在Firefox和Chrome中适当激发（图像加载正常）。它不会在Safari中激活。我认为这与上面链接的SO问题是同一个问题，但是试图“清除”某些答案中建议的变量似乎没有做任何事情，我想知道我是否需要做更多的事情。 / p>

这是一个应该在Firefox / Chrome中运行良好的小提琴，在Safari中不是很好：

https://jsfiddle.net/362pbcLn/

如果这实际上是同一个缓存问题，我需要做些什么来清除变量并让Safari触发加载监听器？

Answer 1

对于Safari（和Firefox），您需要将href设置器更改为

placed.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",test)

Firefox可能会很快支持简化的href语法，但没有理由使用它，上面的行也适用于Chrome和IE Edge。

load eventlistener不会在webkit中为svg image元素触发

1 个答案: