Question

几天前，我的任务是为IE10及更高版本中的 CSS过滤器制定后备策略。这比我想象的要难，但是最后我找到并编辑了这种和平的代码，最终该代码确实有效。随意使用它，因为除非您使用插件，否则大多数代码都不起作用。我现在的问题是使该图像响应整体使用情况。我在一家公司工作，他们需要一个可靠的代码，将来可能会重用。最大的问题是如何适应svg和图像，而又没有周围的多余空间。应该设置元素的大小，但是我不知道应该如何设置它们。如果打开检查e。您会看到它。现在，有一种通用的方法可以创建适用于任何图像的代码，而无需占用空间。

<h1>
    Test
</h1>
<h3>...</h3>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 500 477" width="500" height="477">
    <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 id="one" filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="500" height="477" xmlns:xlink="http://www.w3.org/1999/xlink" href="2.jpg" />
</svg>
   html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
        width: 100%;
    }

    img.grayscale {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

    }
    #svgroot {


        max-width: 100%;
        height: auto;
        display: block; /* They are inline blocks, it's just here to prevent them from wrapping */
    }

*在这里更容易看到它。什么时候 * https://codepen.io/lukagurovic/pen/JwBLYw

用于IE10响应问题的SVG图片过滤器

0 个答案: