Replacing color with transparent blends outer colors together, how to prevent that?

asasass · February 8, 2024, 6:00pm

How do you apply image mask if it’s in the html? https://jsfiddle.net/w8u13ck2/4/

<svg class="box6" width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
  <rect x="5" y="5" width="160" height="160" fill="var(--color-b)"/>
  <rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
  <rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
  <rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
  <rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
  <rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
  <rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
  <rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
  <rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
  <rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
  <rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
  <rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
  <rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
  <rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
  <rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
  <rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
</svg>

<svg viewBox="0 0 170 170" width="170" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect x="80" y="80" width="10" height="10" class="st0" />
  <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
  <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
  <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
  <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
  <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
  <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
  <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
  <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
  <rect x="0" y="0" width="170" height="170" class="st1" />
</svg>

asasass · February 8, 2024, 10:11pm

With help from AI. https://jsfiddle.net/6mk9xjqy/1/

<svg width="170" height="170" viewBox="0 0 170 170">
  <defs>
    <mask id="mask">
      <rect x="80" y="80" width="10" height="10" class="st0" />
      <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
      <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
      <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
      <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
      <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
      <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
      <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
      <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
      <rect x="0" y="0" width="170" height="170" class="st1" />
    </mask>
  </defs>

  <g mask="url(#mask)">
    <rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
    <rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
    <rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
    <rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
    <rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
    <rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
    <rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
    <rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
    <rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
    <rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
    <rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
    <rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
    <rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
    <rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
    <rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
    <rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
    <rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
  </g>
</svg>

asasass · February 9, 2024, 6:58am

How come the background looks like it is on top of the svg?

https://jsfiddle.net/hbucmz4d/1/

or, how come the colors look faded?

or, is that opacity?

How would you remove opacity from the colors so they are full colors?

PaulOB · February 9, 2024, 9:17am

I’m not familiar how masks work in svg but changing the colour of st1 and st2 to white makes it less transparent.


:root {
  --color-a: red;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

body {
  background: white;
}

.st0 {
  fill:white;
}

.st1 {
  fill: none;
  stroke-width: 5px;
  stroke: white;
}

asasass · February 9, 2024, 9:45am

Makes the colors full color and 0% transparent.

asasass · February 9, 2024, 9:46am

Starting here: https://jsfiddle.net/q16f78he/2/

This should appear behind the modal.

Where does this get placed in the html?

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <g id="box">
        <defs>
          <pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
            <rect x="80" y="80" width="10" height="10" class="st0" />
            <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
            <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
            <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
            <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
            <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
            <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
            <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
            <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#repeatedPattern)" />
      </g>
    </svg>

css:

.st0 {
  stroke: rgb(0, 0, 0);
  stroke-width: 0px;
  fill: rgb(17, 85, 204);
}

.st1 {
  fill: none;
  stroke-width: 5px;
  stroke: rgb(17, 85, 204);
}

Then added to the panels:

<div class="slide panel-left">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <use href="#box" />
    </svg>
</div>

<div class="slide panel-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <use href="#box" />
    </svg>
</div>

PaulOB · February 9, 2024, 9:47am

No it makes the black transparent which I thought was what you were doing.

asasass · February 9, 2024, 9:48am

Yes, the black transparent, and the colored lines full color without the opacity.

PaulOB · February 9, 2024, 9:53am

Isn’t that what you were trying to do?

asasass · February 9, 2024, 9:54am

Yes. Nothing wrong with it.

PaulOB · February 9, 2024, 10:18am

Did you mean this?

asasass · February 9, 2024, 11:18am

Have this be the background behind the first video on the screen.

.modal.open

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <g id="box">
        <defs>
          <pattern id="repeatedPattern" patternUnits="userSpaceOnUse" width="165" height="165">
            <rect x="80" y="80" width="10" height="10" class="st0" />
            <rect x="72.5" y="72.5" width="25" height="25" class="st1" />
            <rect x="62.5" y="62.5" width="45" height="45" class="st1" />
            <rect x="52.5" y="52.5" width="65" height="65" class="st1" />
            <rect x="42.5" y="42.5" width="85" height="85" class="st1" />
            <rect x="32.5" y="32.5" width="105" height="105" class="st1" />
            <rect x="22.5" y="22.5" width="125" height="125" class="st1" />
            <rect x="12.5" y="12.5" width="145" height="145" class="st1" />
            <rect x="2.5" y="2.5" width="165" height="165" class="st1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#repeatedPattern)" />
      </g>
    </svg>

Then after modal is clicked:

<div class="slide panel-left">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <use href="#box" />
    </svg>
</div>

<div class="slide panel-right">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <use href="#box" />
    </svg>
</div>

PaulOB · February 9, 2024, 1:29pm

If you want the svg in the modal you will have to use a copy as the modal gets set to display:none when its hidden and then any other svgs that use the mask will be blank also.

Just create another ‘use’ svg as you did for the side panels.

e.g.

If that’s what you meant?

asasass · February 9, 2024, 1:37pm

How is the viewport issue fixed first?

I remember this same thing occurring with an older code, but forget how it was fixed.

Is there a reason why set to transparent both aren’t lined up?

https://jsfiddle.net/cwmpvyg7/1/

In your codepen I noticed it’s not filling the entire screen/viewport:

jsfiddle:

PaulOB · February 9, 2024, 4:36pm

Why do you need both anyway. There is nothing under it to see?

They are not lined up because you didn’t add the fix from the previous time this happened. You also changed the 50% width so 200% won’t match.

iIt probably needs to be this now.

svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;
}
.panel-left svg {
  left: 0;
}

.panel-right svg {
  right: 0;
}

Yes that’s because the element is only 100% tall and the bottom sticks out. You’d probably have to go back to a double scrollbar to sort that.

asasass · February 9, 2024, 4:59pm

When there is a scroll bar it is not aligned: https://jsfiddle.net/sL5f3zdk/4/

Opening browser window left and right is fine.

Scrolling up and down this occurs:

.panel-left, .panel-right svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;
}
.panel-left svg {
  left: 0;
}

.panel-right svg {
  right: 0;
}

asasass · February 9, 2024, 6:26pm

Is there a fix that will work no matter if it is a color or transparent?

or, if I set a color, what else would need to be changed?

or, maybe I am thinking this the wrong way.

Code 1) background-color: black;

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100vh;
  overflow: auto;
  background-color: black;
}

gives me this:

Code 2) background-color: transparent:

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  height:100vh;
  overflow: auto;
  background-color: transparent:
}

Gives me this:

asasass · February 10, 2024, 2:45am

When viewed this way teal opacity background goes over blue svg when should be behind.

Code 3) background-color: rgba(46, 138, 138, 0.62);

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 2;
  /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
 background-color: rgba(46, 138, 138, 0.62); 
}

asasass · February 10, 2024, 12:50pm

would adding any of this:

html,
body,
svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

to this:

Do anything?

svg.in-modal {
  position: absolute;
  left: 0;
  top: 0;
}

PaulOB · February 10, 2024, 2:44pm

Remind me why the svg.in-modal element is there in the first place?

I see no difference if it is simply removed but then I got lost half way down the thread with all the different changes.

Topic		Replies	Views
Changing blue color to transparent HTML & CSS	37	3067	March 10, 2022
SVG background replacement with background-image HTML & CSS	5	9970	September 16, 2020
Transparency issue HTML & CSS	5	521	October 8, 2014
Css color overlay instead of opacity change HTML & CSS	13	5967	October 8, 2014
Base64 SVG: Fill Color Using CSS? HTML & CSS	2	11526	October 8, 2014

Replacing color with transparent blends outer colors together, how to prevent that?

Related topics