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完美配合，但在任何其他浏览器中，图片都无法加载。图片链接如“壁纸”，“按钮＆＃39;海报”等。虽然如果我点击论文中应该出现的那一点，但是在新标签中单独打开，但是否则他们不会工作。

Answer 1

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

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