1

我写了一个 HTML 页面，我需要在其中嵌入带有超链接的图像的某些部分。为此，我使用了 SVG 标签，这样我就不必使用图像映射标签，因为它们不能很好地随屏幕缩放。

这是页面在 chrome 中的样子在此处输入图像描述

<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 上运行得很好，但在任何其他浏览器中，图像都不会加载。像“壁纸”、“按钮”、“海报”这样的图像链接虽然在新选项卡中单独打开，但如果我点击它们应该在的纸张上的点，但否则它们不起作用。

4

1 回答 1

0

SVG<image>标签在 SVG 1.1 中必须具有宽度和高度属性，不允许使用 CSS 属性。

Chrome 正在尝试为宽度和高度实现 SVG 2 CSS 属性，这就是它在那里工作的原因。SVG 2 规范尚未完成，目前没有其他 UA 实现此功能。我想随着规范接近完成，更多的 UA 将实现这个功能。

于 2015-09-15T18:16:44.260 回答