Конвертировать CSSgram Instagram Willow фильтр в SVG фильтр - PullRequest
Новая
       61

Конвертировать CSSgram Instagram Willow фильтр в SVG фильтр

0 голосов
/ 04 марта 2020

Я пытаюсь преобразовать следующий CSSGram Willow CSS filter в фильтр SVG. 

.willow {
  position: relative;
  -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9);
          filter: grayscale(0.5) contrast(0.95) brightness(0.9); }

  .willow img {
    width: 100%;
    z-index: 1; }

  .willow:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    z-index: 2; }

  .willow:after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    z-index: 3; }

  .willow::before {
    background-color: radial-gradient(40%, circle, #d4a9af 55%, black 150%);
    mix-blend-mode: overlay; }

  .willow::after {
    background-color: #d8cdcb;
    mix-blend-mode: color; }

Это то, что у меня есть в SVG пока что .:

        <radialGradient id="gradient_willow" cx="40%">
            <stop offset="55%" stop-color="#d4a9af" stop-opacity="0%"/>
            <stop offset="150%" stop-color="black" stop-opacity="0%"/>
        </radialGradient>

        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="willowsc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_willow)" fill-opacity="1"/>

        <filter id="willow">
            <!-- grayscale 0.5 -->
            <feColorMatrix type="matrix"
                           values="0,6063 0.3576 0.0361 0 0
                                   0.1063 0.8576 0.0361 0 0
                                   0.1063 0.3576 0.5361 0 0
                                   0 0 0 1 0"/>

            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.95" intercept="0,025"/>
                <feFuncG type="linear" slope="0.95" intercept="0,025"/>
                <feFuncB type="linear" slope="0.95" intercept="0,025"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9"/>
                <feFuncG type="linear" slope="0.9"/>
                <feFuncB type="linear" slope="0.9"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feImage xlink:href="#willowsc" result="grad" x="0" y="0"/>
            <feBlend mode="overlay" in="SourceGraphic" />
            <feFlood flood-color="#d8cdcb"/>
            <feBlend mode="color" in="SourceGraphic" />
        </filter>

Как правильно конвертировать следующие CSS в SVG: 

  .willow::before {
    background-color: radial-gradient(40%, circle, #d4a9af 55%, black 150%);
    mix-blend-mode: overlay; }

  .willow::after {
    background-color: #d8cdcb;
    mix-blend-mode: color; }
...