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

Question

I wrote an HTML page where I needed to embed certain sections of an image with hyperlinks. For this I used SVG tags so that I don't have to use image map tags, since they cannot scale well with the screen.

This is what the page looks like in 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>

Basically the image in the IMAGE tags don't load and the screen takes the color of the background. I know that chrome is much more lenient with the rules but I don't think I have made any errors. This code works perfectly well with Chrome, but in any other browser, the images don't load. The image links like 'Wallpaper', 'Button', 'poster' although open separately in new tabs if I click the point in the paper where they are supposed to be but otherwise they don't work.

Answer 1

An SVG <image> tag must have width and height attributes in SVG 1.1, CSS properties are not allowed.

Chrome is experimenting with implementing SVG 2 CSS Properties for width and height which is why it works there. The SVG 2 specification is unfinished and no other UA currently implements this feature. I imagine as the specification nears completion more UAs will implement this functionality though.