我有一个普通的SVG三角形,就像这样:
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon>
</svg>
我正在使用CSS来平滑地过渡SVG的颜色,当有人悬停在上面时:
#triangle { transition: 1s; }
svg:hover #triangle { fill: orange; }
这对于所有浏览器都有效。
但是现在我想要在同一个SVG中添加可点击链接功能,所以我用链接标记将其包围:
<a href="http://google.com">
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon>
</svg>
</a>
但是在Safari中,我的平稳颜色过渡被打破了。我的原本一秒钟的颜色过渡,现在SVG路径立即改变颜色。
这在Firefox或Chrome中不会发生。
这是否是Safari中的故障?