SVG img preserveAspectRatio Chrome [英] SVG img preserveAspectRatio Chrome

问题描述

当我对SVG文件中的图像使用preserveAspectRatio = none时，它在Google Chrome中似乎不起作用。
SVG不会根据图像的宽度和高度进行缩放。

 <？xml version =1.0 encoding =UTF-8standalone =no？> 
< svg id =test
 xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/ xlink
 viewBox =0 0 1024 768> 
< defs> 
< / defs> 
< image x =288y =140width =368height =160xlink：href =image.svgpreserveAspectRatio =none/> 
< / svg> 
<？xml version =1.0encoding =UTF-8standalone =no？> 
< svg id =test
 xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/ xlink
 viewBox =0 0 1024 768> 
< defs> 
< / defs> 
< image x =288y =140width =368height =160xlink：href =image.svgpreserveAspectRatio =none/> 
< / svg> 
  

在IE9中，最新的Opera和FF可以工作！

如果应该包含的图像没有属性preserveAspectRatio = none，它似乎不起作用。
我不能认为每个SVG都有这个属性。所以我需要知道如何覆盖这样一个属性，以防SVG嵌入'图像'标签。

解决方案

http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute

请尝试推迟。

但我认为chrome不支持这个值。

when I use preserveAspectRatio=none for an image in a SVG file it does not seem to work in Google Chrome. The SVG does not scale according to the image width and height.

<?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, latest Opera and FF it works!

It seems that it does not work if the image that should be included has not the attribute preserveAspectRatio=none. I cannot assume that every SVG has this attribute. So I need to know how to overwrite such an attribute in case the SVG is embedded with 'image' tag.

解决方案

http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
Please try "defer".
But I think chrome does not support this value.

这篇关于SVG img preserveAspectRatio Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！