1

我正在尝试实现此代码，它将图像显示为灰度并在悬停时将图像更改为其原始彩色图像。这里的问题是 svg inline 它不适用于 IE10。Firefox、Safari、Chrome 的代码有效，IE10 (svg) 的代码无效。有人可以帮我解决这个问题吗？

HTML 代码：`

火狐、Chrome、Safari、IE6-9

<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 216 135" width="216" height="135">
<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="216" height="135" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="cloud.png" /><br />


  <svg xmlns="http://www.w3.org/2000/svg" id="svgroot1" viewBox="0 0 216 135" width="216" height="135">
  <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="216" height="135" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sd.png" />`

CSS代码是：

`img.grayscale { filter: url("data:image/svg+xml;utf8,http://www.w3.org/2000/svg\'>#grayscale"); 

    filter: gray; 
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

svg {
    background:url(cloud.png);
}



svg image {
    transition: all .6s ease;
}

svg image:hover {
    opacity: 0;
}`

我如何在 svg 代码的同一页面上制作多个灰度图像。

4

0 回答 0