javascript - 如何以较低的不透明度保持 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>

这是演示代码..!!

Demo code