Применение цветовой непрозрачности к изображению SVG

Question

У меня есть SVG, который содержит элемент <g>, внутри которого есть <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>

Answer 1

Я бы хотел применить цветное полупрозрачное наложение поверх изображения.например, # 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>