SVG img preserveAspectRatio Chrome
when i use preserveAspectRatio = none on image in SVG file it doesn't seem to work in google chrome. SVG is not scaled to fit the width and height of the image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="test"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 768">
<defs>
</defs>
<image x="288" y="140" width="368" height="160" xlink:href="image.svg" preserveAspectRatio="none" />
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="test"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1024 768">
<defs>
</defs>
<image x="288" y="140" width="368" height="160" xlink:href="image.svg" preserveAspectRatio="none" />
</svg>
In IE9, the latest version of Opera and FF works!
It doesn't seem to work if the image to be included does not have the preserveAspectRatio = none attribute. I cannot assume that every SVG has this attribute. So I need to know how to overwrite an attribute like this if the SVG is embedded in the 'image' tag.
+3
source to share
1 answer
http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
Try deferring.
But I think chrome does not support this value.
-1
source to share