如何在不透明度較低的情況下保持SVG顏色強度

Question

我正在使用.PNG背景（建築物的照片）和背景上的.SVG元素進行着色應用程序。 然后，這些.SVG路徑將在JavaScript代碼的幫助下進行着色。 我首先將.SVG圖層的不透明度設置為0.65

在這種情況下，.PNG背景在彩色.SVG后面是可見的，但是這些顏色似乎“被洗掉了”，因為降低了不透明度。 有沒有一種方法可以保持顏色的強度，即在.PNG背景上覆蓋彩色的.SVG路徑？

這是HTML部分：

<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>

與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;
}

Answer 1

嗨，你期望這樣嗎？

 #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> 

這是演示代碼.. !!

演示代碼

Answer 2

您可以在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>

這是一個示例：

 <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> 

此處有完整詳細信息： https : //css-tricks.com/basics-css-blend-modes/

Answer 3

好的，感謝@ ramtin-gh提供的鏈接 ，我設法解決了這個問題。 將混合混合模式屬性添加到SVG圖層后，顏色將與背景圖像相乘顯示。 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>

使用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;
}
.svg_overlay {
    margin-top:9px; 
    mix-blend-mode: multiply;
}

為了簡化文章，我不會在此處發布所有SVG圖層。 多謝您的回覆。 希望這可以幫助遇到類似問題的人。