我有一个包含 <g>
的 SVG元素,其中有一个 <path>
,在这里我指定一个 fill
的 #image0
稍后在同一个 SVG 中我有我的 <def>
,这里是我的 <pattern>
然后是 <image>
与 #image0
的填充对应的标签
href
的值的 <image>
是 base64 编码的图像。
我想在图像上应用彩色、半透明的覆盖层。例如#F5A9A9 50% 不透明度叠加层。
我试过添加 style="opacity: 0.5"
到 <image>
标签——这应用了不透明度,但显然没有颜色。我怀疑答案是 background-color: rgba(245,169,169, 0.5)
但我不确定把它放在哪里,
<g class="g-item">
<path class="st0" d="M1839.1,1394.2c0,0,22.7,6.7,30,18c0,0,111.3,7.1,122.6-130.5V801.1l-827.8,260l0,226 c4.9,107,118.7,125,118.7,125c3.6-17.3,27-19.5,27-19.5L1839.1,1394.2z" data-id="0" style="fill: url("#image0");"></path>
</g>
<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>
</pattern>
</defs>
最佳答案
I would like to apply a coloured, semi transparent overlay on top of the image. e.g. a #F5A9A9 50% opacity overlay.
好吧,您可以这样做:在图像顶部绘制一个半透明矩形:
<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>
关于css - 将彩色不透明度应用于 SVG 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50401570/