Question

我试图在html文档中嵌入一个动画svg如下（这是一个简化的最小例子）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Circle</title>
</head>
<body>
    <div id="circle">
        <img src="circle1.svg" width="auto" height="100%" alt="Image One" />
    </div>
</body>
</html>

SVG：

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5000" height="1000" border="3px solid #eee" display="block" margin="1em auto" xml:space="preserve">
        <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
        <animate 
                         xlink:href="#orange-circle"
                         attributeName="r"
                         from="30"
                         to="450" 
                         dur="1s"
                         begin="click"
                         fill="freeze" />
</svg>

SVG动画作为独立版本适用于我，如果删除<div ...></div>标签，它也可以在html中使用。

但如果我使用上述内容，动画就无法启动。 SVG是否未收到点击事件以及如何解决此问题？

请注意，我不想用等效的javascript替换SVG动画，因为我无法真正控制SVG的生成，我也不想内联SVG。

Answer 1

<img>元素的内容不是交互式的，因此无法处理点击事件。你必须在这里使用不同的容器元素，例如<object>或<iframe>

SVG动画在HTML div中开始事件

1 个答案: