Question

我正在尝试实现此代码，该代码将图像显示为灰度，并在悬停时将图像更改为其原始颜色图像。这里的问题是svg内联它不适用于IE10。 Firefox，Safari，Chrome的代码片段，IE10（svg）的代码没有。有人可以帮我解决这个问题吗？

HTML代码： `

Firefox，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 \'＆gt; #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代码中在同一页面上制作多个灰度图像。

如何将多个灰度图像转换为同一页面上的颜色？

0 个答案: