Reputation: 65

how to maintain SVG color intensity with lower opacity

I am working on a coloring application with a .PNG background (a photo of a building) and .SVG elements over the background. These .SVG paths are then being colored with the help of a JavaScript code. I started with setting the opacity of the .SVG layers to i.e. 0.65

In this case the .PNG background is visible behind the colored .SVG but the colors seem 'washed out' because the lowered opacity. Is there a way to maintain the intensity of the colors, i.e. to overlay the colored .SVG path on the .PNG background?

Here is the HTML part :

<div class="building_area_eave_1" id="building_area">
    <svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px; opacity:0.65;">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

with the CSS :

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("../images/1_part_eave_background.png") no-repeat;
}

Upvotes: 1

Answers (3)

dujmovicv

Reputation: 65

OK, thanks to the link provided by @ramtin-gh I managed to solve this issue. Adding a mix-blend-mode property to the SVG layers resulted the colors to display multiply to the background image. HTML :

<div class="building_area_eave_1" id="building_area">
    <svg class="svg_overlay" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

with the CSS style :

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("../images/1_part_eave_background.png") no-repeat;
}
.svg_overlay {
    margin-top:9px; 
    mix-blend-mode: multiply;
}

I'm not posting all the SVG layers here to keep the post simple. Thanks for your replies. Hope this can help someone with similar issue.

Upvotes: 0

Ramtin Gh

Reputation: 1050

You can use blend modes in your svg:

<filter id="f1" x="0" y="0" width="1" height="1">
      <feImage xlink:href="#p1" result="p1"/>
      <feImage xlink:href="#p2" result="p2"/>
      <feBlend mode="multiply" in="p1" in2="p2" />
</filter>

Here is a sample:

<svg width="500px" height="500px" viewBox="0 0 1000 1000">
  
<defs>

<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
  
  <path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">   
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" 
     additive="replace" fill="freeze"/>
  </path>
  
  <path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path> 
  
  <path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
  <path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
    <path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
      <path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
      <path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path> 
  
  <filter id="blendit">
    <feImage xlink:href="#orange" x="0" y="0" result="1"/>
    <feImage xlink:href="#yellow" x="0" y="0" result="2"/>
        <feImage xlink:href="#green" x="0" y="0" result="3"/>
        <feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
        <feImage xlink:href="#blue" x="0" y="0" result="5"/>
        <feImage xlink:href="#violet" x="0" y="0" result="6"/>
        <feImage xlink:href="#pink" x="0" y="0" result="7"/>
        <feImage xlink:href="#red" x="0" y="0" result="8"/>
    
    <feBlend mode="multiply" in="1" in2="2" result="12"/>
        <feBlend mode="multiply" in="12" in2="3" result="123"/>
        <feBlend mode="multiply" in="123" in2="4" result="1234"/>
        <feBlend mode="multiply" in="1234" in2="5" result="12345"/>
        <feBlend mode="multiply" in="12345" in2="6" result="123456"/>
        <feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
        <feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
    <feColorMatrix type="hueRotate" values="0">
      <animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
    </feColorMatrix>

</filter>
  
</defs>
  
  <rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
  
</svg>

Full details here: https://css-tricks.com/basics-css-blend-modes/

Upvotes: 1

Himesh Aadeshara

Reputation: 2121

hi do you expecting like this..???

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat;
}
svg#full_x5F_wall_x5F_w_x5F_eave ~ #main_wall_1 {
    opacity: 0.65;
}

<div class="building_area_eave_1" id="building_area">
    <svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px;">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

and here is the demo code..!!

Demo code

Upvotes: 1

how to maintain SVG color intensity with lower opacity

Answers (3)

Related Questions