Chrome 完美加载网页，所有其他浏览器都失败。为什么？

Question

我写了一个 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>

基本上，IMAGE 标签中的图像不会加载，屏幕会采用背景颜色。我知道 chrome 对规则要宽松得多，但我认为我没有犯任何错误。此代码在 Chrome 上运行良好，但在任何其他浏览器中，图像都无法加载。图片链接如 'Wallpaper'、'Button'、'poster'，虽然如果我单击论文中它们应该在的位置，它们会在新选项卡中单独打开，但否则它们将不起作用。

Answer 1

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

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

Chrome 完美加载网页，所有其他浏览器都失败。为什么？

Chrome loads the webpage perfectly, every other browser fails. Why?

html

svg

responsive-design

responsiveness