我有一个包含<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)
答案 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>