CODEWITHSUNDEEP
htmlcsssvgimage-maskingmix-blend-mode
Wessam Sharaf
Wessam Sharaf

Reputation: 131

CSS: apply mix-blend-mode property to specific elements only

I want to use the mix-blend-mode property to make some specific SVG paths take the background image on the stroke so that the path appears as if it is an erasing path. The following code is what I have reached. However, as you can see, the mix-blend property affects the other paths which are needed to appear without any background image on the stroke. Therefore, I am asking for a way to apply the mix-blend-mode property to only separate groups of elements and keep other elements unaffected.

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>

The following is what I seek.

enter image description here

Note: I could do this using masking, but it is very slow in some browsers.

Upvotes: 1

Views: 1430

Answers (1)

defghi1977
defghi1977

Reputation: 5359

You can use g element with isolation: isolate; to specify elements under the effect of 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>

But in this case, I think you should use mask element.

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>

Upvotes: 1

Related Questions