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


我要在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("#filtersPicture")" 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>

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

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

css HTML svg

小夜°ゝ音ㄚ 10 years, 7 months ago

Your Answer