SVG tag not working in Safari and Firefox

问题:

My problem is the following : I try to display an image in a SVG section thanks to the <image> tag. The following code is an example.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <image xlink:href="http://2.bp.blogspot.com/-auWhmIJyACw/TaHzOV8pN1I/AAAAAAAAAPY/2nGmNaJRaBs/s1600/roger-federer-widescreen-wallpaper-001.jpg" preserveAspectRatio="xMinYMin slice"></image>
</svg>

My problem is that it doesn't work on Safari and Firefox. It seems to come from the image tag which is not working. I don't know if it's a syntax or a xlink error.

There is a codepen if you want to make your tests : http://codepen.io/vavouweb/pen/VaMNqg

回答1:

In SVG 1.1 the attributes width and height are mandatory for images.

The unfinished SVG 2 specification proposes that requirement be removed but only Chrome and possibly IE edge have implemented that suggestion at the moment as far as I know.