Svg фильтр изображений для IE10 реагирующих проблем - PullRequest
Новая
       14

Svg фильтр изображений для IE10 реагирующих проблем

0 голосов
/ 09 января 2019

Несколько дней назад у меня была задача создать запасную стратегию для CSS-фильтра в IE10 и выше. Это было сложнее, чем я думал, но в конце концов я нашел и отредактировал этот код, который в конце концов действительно работает. Не стесняйтесь использовать его, так как большинство кодов не работают, если вы не используете плагины. Моя проблема сейчас заключается в том, чтобы сделать это изображение отзывчивым для общего использования. Я работаю в компании, и им нужен твердый код, который в будущем может быть повторно использован . Самая большая проблема заключается в том, как разместить 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

...