CSS : 특정 요소에만 혼합 - 블렌드 - 모드 속성 적용

믹스 - 블렌드 - 모드 속성을 사용하여 특정 SVG 경로가 스트로크의 배경 이미지를 가져 와서 경로가 마치 마치 보이는 것처럼 보이게하고 싶습니다. 지우기 경로. 다음 코드는 제가 도달 한 것입니다. 그러나 알 수 있듯이 혼합 혼합 속성은 스트로크에서 배경 이미지없이 나타나야하는 다른 경로에 영향을줍니다. 따라서 믹스 - 블렌드 모드 속성을 다른 요소 그룹에만 적용하고 다른 요소는 영향을받지 않도록하는 방법을 묻습니다. CSS : 특정 요소에만 혼합 - 블렌드 - 모드 속성 적용

g.erasing image{ 
 
mix-blend-mode: lighten; 
 
}

<html> 
 

 
<body> 
 

 
    <svg height="400" width="450"> 
 
    <!-- this is the background image --> 
 
    <image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image> 
 

 
     <g class="drawing"> 
 
     <!-- these are the drawing paths --> 
 
     <path d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" /> 
 
     <path d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" /> 
 
     <path d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" /> 
 
     <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" /> 
 
     </g> 
 

 

 
     <g class="erasing"> 
 
      <!-- these are the erasing paths --> 
 
     <path d="M 0 0 L 400 450" stroke="black" stroke-width="20" /> 
 
     <path d="M 0 0 L 200 300" stroke="black" stroke-width="20" /> 
 
     <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image> 
 
     </g> 
 

 
    </svg> 
 

 
</body> 
 
</html>

내가 추구하는 것입니다.

참고 :이 사용 마스킹을 할 수 있지만, 일부 브라우저에서 매우 느립니다.

출처

2017-11-09 Wessam Sharaf

isolation: isolate;과 함께 g 요소를 사용하면 mix-blend-mode의 영향을받는 요소를 지정할 수 있습니다.

그러나이 경우

circle{ 
 
    mix-blend-mode: lighten; 
 
} 
 
g{ 
 
    isolation: isolate; 
 
}

<svg width="200px" height="200px"> 
 
    <rect width="100%" height="100%" fill="pink"/> 
 
    <circle cx="100" cy="80" r="60" fill="red"/> 
 
    <circle cx="70" cy="130" r="60" fill="green"/> 
 
    <circle cx="130" cy="130" r="60" fill="blue"/> 
 
</svg> 
 
<svg width="200px" height="200px"> 
 
    <rect width="100%" height="100%" fill="pink"/> 
 
    <g> 
 
    <circle cx="100" cy="80" r="60" fill="red"/> 
 
    <circle cx="70" cy="130" r="60" fill="#0f0"/> 
 
    <circle cx="130" cy="130" r="60" fill="blue"/> 
 
    </g> 
 
</svg>

, 난 당신이 mask 요소를 사용한다고 생각합니다.

g.drawing{ 
 
    mask: url(#erasing); 
 
}

<svg height="400" width="450"> 
 
    <!-- this is the background image --> 
 
    <image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image> 
 
    <g class="drawing"> 
 
    <!-- these are the drawing paths --> 
 
    <path d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" /> 
 
    <path d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" /> 
 
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" /> 
 
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" /> 
 
    </g> 
 
    <defs> 
 
    <mask id="erasing"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <!-- these are the erasing paths --> 
 
     <path d="M 0 0 L 400 450" stroke="black" stroke-width="20" /> 
 
     <path d="M 0 0 L 200 300" stroke="black" stroke-width="20" /> 
 
    </mask> 
 
    </defs> 
 
</svg>

출처

2017-11-09 14:21:05 defghi1977

CSS : 특정 요소에만 혼합 - 블렌드 - 모드 속성 적용

답변

관련 문제