svg里面的图片width和height设置了不起作用

Question

我要在IE10下实现图片的灰度,找了半天发现只有用svg才可以实现

<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://192.168.0.10:3000/uploads/photo/609/address/a219c3c5eb8fdce852a61385ae31bc7ee270fc73.jpg" />
</svg>

灰度的效果实现了,但遇到另一个问题,图片现在是按比较缩放的,不是自动填满给定的大小

不知道有没对这方面比较熟悉的帮帮忙?

Answer 1

通过设置 viewBox 进行限定宽高 ；

见 : https://segmentfault.com/a/11...