我写了一个 HTML 页面,我需要在其中嵌入带有超链接的图像的某些部分。为此,我使用了 SVG 标签,这样我就不必使用图像映射标签,因为它们不能很好地随屏幕缩放。
<svg id="mySVG" style="width:100%;height:100%;" version="1.1" viewbox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg">
<image style="width:inherit;height:inherit;" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Image URL">
</image>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Image URL">
<circle cx="45%" cy="33%" r="120" stroke="black" stroke-width="3" opacity="0" fill="#fff">
</circle>
</a>
.
.
//More <a> tags representing the various clickable points in the image
.
.
.
</svg>
基本上,图像标签中的图像不会加载,屏幕采用背景颜色。我知道 chrome 对规则更加宽容,但我认为我没有犯任何错误。这段代码在 Chrome 上运行得很好,但在任何其他浏览器中,图像都不会加载。像“壁纸”、“按钮”、“海报”这样的图像链接虽然在新选项卡中单独打开,但如果我点击它们应该在的纸张上的点,但否则它们不起作用。