将彩色不透明度应用于SVG图像

时间:2018-05-17 22:56:53

标签: css svg

我有一个包含<g>元素的SVG,其中包含<path>,在此我指定fill #image0

稍后在同一个SVG中,我有<def>,这里是我的<pattern>,然后是与<image>

填充对应的#image0标记

href的{​​{1}}的值是base64编码的图像。

我想在图像顶部应用彩色半透明覆盖层。例如a#F5A9A9 50%不透明度覆盖。

我尝试将<image>添加到style="opacity: 0.5"标记 - 这会应用不透明度,但显然没有颜色。我怀疑答案是<image>,但我不确定在哪里定位,

background-color: rgba(245,169,169, 0.5)

1 个答案:

答案 0 :(得分:1)

  

我想在图像顶部应用彩色半透明覆盖层。例如a#F5A9A9 50%不透明度覆盖。

嗯,你可以做到这一点:在图像顶部绘制一个半透明的矩形:

<defs class="g-def">
    <pattern id="image0" width="1" height="1" y="0" x="0"
             patternContentUnits="objectBoundingBox"
             viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
        <image preserveAspectRatio="xMidYMid meet"
               width="1" height="1" x="0" y="0"
               xlink:href="data:image/png;base64,iVBORw0KGgoAA.....AElFTkSuQmCC"
               data-naturalWidth="960" data-naturalHeight="960"></image>
        <rect width="1" height="1" fill="#F5A9A9" opacity="0.5"></rect>
    </pattern>
</defs>