Как мне сделать так, чтобы любая часть фонового изображения под svg имела дуотон? - PullRequest
Новая
       17

Как мне сделать так, чтобы любая часть фонового изображения под svg имела дуотон?

0 голосов
/ 18 мая 2018

У меня есть фоновое изображение, и я хочу иметь рамку вокруг экрана, на которой есть дуплекс изображения (а не отредактированный вручную дотон, сделанный в фотошопе, я планирую анимировать это), как бы я достиг этого, чтобы любая частьфоновое изображение, которое находится под определенным SVG влияет на это?Я планирую анимировать svg так, чтобы он двигался, и части изображения, которые являются дуотонами, меняются.

Это пример дуотона: 

body {
  background: #1d1f20;
  padding: 20px;
  text-align: center;
}

.svg-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.img {
  margin: 5px;
  width: 350px;
}

hr {
  border: solid 1px #191919;
}

.duotoned--peachy {
  filter: url('#duotone_peachypink');
}

.duotoned--navy {
  filter: url('#duotone_navyorange');
}
<!-- Duotone Article Demo -->

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
  <filter id="duotone_peachypink">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_magenta_gold">
      <feFuncR type="table" tableValues="0.3411764706 0.1082352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>
  
  <filter id="duotone_navyorange">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_navy_orange">
      <feFuncR type="table" tableValues="0.05490196078 1"></feFuncR>
      <feFuncG type="table" tableValues="0.1568627451 0.5921568627"></feFuncG>
      <feFuncB type="table" tableValues="0.1647058824 0.003921568627"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>   
</svg>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Original Image'>

<img class="img duotoned--peachy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>

<hr>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Original Image'>

<img class="img duotoned--navy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Duotoned Imaged'>

Прикрепленная фотография представляет собой ручной фон, который я создал в фотошопе, и пример эффекта, которого я хочу добиться.Цель состоит в том, чтобы верхняя часть границы двигалась вниз и чтобы все, что находится внутри границы при движении вниз, было двойным. image

edit: Например, здесь , в третьем примере показана только часть изображения внутри звезды.я хочу, чтобы только часть изображения внутри SVG имела эффект двойного эффекта.

1 Ответ

0 голосов
/ 18 мая 2018

Самый простой подход, вероятно, состоит в том, чтобы поместить два изображения друг на друга, а затем применить клип в форме спппа к верхнему. 

body {
  background: #1d1f20;
  padding: 20px;
  text-align: center;
  overflow: auto;
}

.svg-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.img {
  margin: 5px;
  width: 350px;
}

hr {
  border: solid 1px #191919;
}

.duotoned--peachy {
  filter: url('#duotone_peachypink');
}

.diamond-clip {
  clip-path: url(#diamond-clip);
}

.stack {
  position: relative;
}

.stack img {
  position: absolute;
  top: 0;
  left: 0;
}
<!-- Duotone Article Demo -->

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
  <filter id="duotone_peachypink">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_magenta_gold">
      <feFuncR type="table" tableValues="0.3411764706 0.1082352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>
  
  <clipPath id="diamond-clip" clipPathUnits="objectBoundingBox">
    <polygon points="0.5,0, 1,0.5, 0.5,1, 0,0.5"/>
  </clipPath>

</svg>

<div class="stack">
  <img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Original Image'>
  <img class="img duotoned--peachy diamond-clip"
                   src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>
</div>
...