0

I'm trying to make an svg transparent when on a div with a dark background. The final objective is to have the red svg disappear, leaving the hollow black border in place.

I've already thinked of using z-index but this is part of a global header, removing this option.

I've already tried to follow the solution on this thread "How to get mix-blend-mode scroll effect using javascript?" but the solutions doesn't seem suitable for my case.

To do some test at the moment the red svg is used as a mask for a div, but if necessary or better the original svg can be placed like the black border.

Here the link to a jsfiddle with the structure of the test page i'm using : https://jsfiddle.net/qvgtyx46/

<!DOCTYPE html>
<html>
    <body>
    
        <link rel="stylesheet" type="text/css" href="style.css">
    
        <div class="hollow">
            <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" version="1.1" viewBox="0 0 100 100">
 <path d="m65.734 32.469c9.375-5.0234 16.742-4.6602 28.379-6.0625-10.992 7.2695-15.949 7.4453-21.719 16.277 10.629 0.33594 16.832 4.3359 27.605 8.9414-13.156 0.80078-17.535-1.5234-26.949 3.2383 9.0391 5.6055 12.41 12.168 19.438 21.547-11.793-5.8828-14.422-10.09-24.957-10.672 5.0234 9.375 4.6602 16.742 6.0625 28.379-7.2695-10.992-7.4453-15.949-16.277-21.719-0.33594 10.629-4.3359 16.832-8.9414 27.605-0.80078-13.156 1.5234-17.535-3.2344-26.949-5.6055 9.0352-12.168 12.41-21.547 19.438 5.8867-11.793 10.09-14.426 10.672-24.957-9.375 5.0234-16.742 4.6602-28.379 6.0625 10.992-7.2695 15.949-7.4453 21.719-16.277-10.629-0.33594-16.832-4.3359-27.605-8.9414 13.156-0.80078 17.535 1.5234 26.949-3.2383-9.0391-5.6055-12.41-12.168-19.438-21.547 11.793 5.8867 14.422 10.09 24.957 10.672-5.0234-9.375-4.6602-16.742-6.0625-28.379 7.2695 10.992 7.4453 15.949 16.277 21.719 0.33594-10.629 4.3359-16.828 8.9414-27.605 0.80078 13.156-1.5234 17.535 3.2344 26.949 5.6055-9.0352 12.168-12.406 21.547-19.438-5.8867 11.793-10.09 14.426-10.672 24.957z" fill="none" stroke-width="2" stroke="black"/>
            </svg>
        </div>
        
        <div class="fill"></div>
        
        <div class="is-dark">
          lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
        </div>
        
        <div class="is-light">
         lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
        </div>
        
        <div class="is-dark">
         lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
        </div>
        
    </body>
</html>

.fill {
    background: red;
    width: 60px;
    height: 60px;
    position: fixed;
    z-index: 9998;
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
    -webkit-mask-size: 60px;
}

.hollow {
    position: fixed;
    z-index: 9999;
    position: fixed;
}

.is-dark {
  display: block;
  height: 600px;
  width: 100%;
  position:relative;
  z-index:0;
  background:green;
}


.is-light {
  display: block;
  position:relative;
  height: 600px;
  width: 100%;
  background: #fff;
  color:#000;
}

UPDATE: Using jquery now i'm able to do it, but only on the first div if is dark https://jsfiddle.net/36fcj9p0/.

Leotron
  • 1
  • 2
  • So, in your fiddle you want the red star to be transparent when over the green sections but opaque over the white ones? – Kaiido Dec 20 '22 at 01:16
  • Yes, that's the goal. I've tried using jquery but the only result achieved was making transparent all at once when in between of the two div. – Leotron Dec 20 '22 at 08:21
  • I reread Kaiido's question and realized that I read it wrong. It is the other way around, it should be transparent over white and opaque over green – Leotron Dec 20 '22 at 10:35

0 Answers0