3

我正在尝试使图像灰度在 IE 10 上工作，经过一些搜索后使用 svg 可以将其存档，但现在我遇到了另一个问题，这是使图像灰度在 IE 10 上工作的代码

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://thecybershadow.net/misc/stackoverflow.png" />
</svg>

问题是图像没有按我给出的大小缩放，例如，如果图像的大小是 200 X 1000 而我给出的大小是 200 X 500，它会将图像缩放到 100 X 500

我试过preserveAspectRatio http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute似乎不起作用

所以我的问题是如何使图像调整为我给定的大小？

提前致谢

4

2 回答 2

6

如果您希望图像拉伸以填充您精确指定的宽度和高度（水平和垂直），请使用preserveAspectRatio="none".

<image x="0" y="0" width="400" height="377" xlink:href="blah" preserveAspectRatio="none" />
于 2013-07-10T15:21:46.863 回答
1

找不到绝对的解决方案，但这项工作适合我们的需求

使用preserveAspectRatio可以使图像几乎适合我给出的尺寸并且超出部分将被裁剪，所以我可以让图像的比例与我给出的尺寸相似，就可以了

<image preserveAspectRatio="xMidYMid slice" filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://192.168.0.10:3000/uploads/photo/609/address/a219c3c5eb8fdce852a61385ae31bc7ee270fc73.jpg" />
于 2013-07-09T09:58:26.687 回答