Применить текстуру к изображению в SVG - PullRequest
Новая
       16

Применить текстуру к изображению в SVG

0 голосов
/ 09 февраля 2019

Я пытаюсь применить текстуру к изображению

Оригинал

enter image description here

Текстура

enter image description here

Результат (сделано с PHP GD)

enter image description here

Но с SVG ближе всего я получил этот результат 

<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
    <defs>
    
      <filter id="texture">
        <feImage href="https://i.imgur.com/pjWcnJs.jpg" result="texture-img"/>
        <feBlend in="SourceGraphic" in2="texture-img" mode="multiply"/>
      </filter>
    
    </defs>
    
    <g>
        <g filter="url(#texture)">
            <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
        </g>
    </g>
    
</svg>

fiddle

Есть ли другой способ, который не будет текстурировать прозрачные пиксели?

1 Ответ

0 голосов
/ 09 февраля 2019

Я нашел решение, которое заключается в пропуске текстуры через композитный фильтр, который обрезает ее до исходного изображения 

<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
    <defs>
    
      <filter id="texture">
        <feImage href="https://i.imgur.com/pjWcnJs.jpg" result="texture-img"/>
        <feComposite in2="SourceGraphic" operator="in" in="texture-img" result="composite"/>
        <feBlend in="SourceGraphic" in2="composite" mode="multiply"/>
      </filter>
    
    </defs>
    
    <g>
        <g filter="url(#texture)">
            <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
        </g>
    </g>
    
</svg>

Для мозаики текстуры я использовал feTile вот так 

<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
    <defs>
    
      <filter id="texture" x="0" y="0" width="100%" height="100%">
        <feImage href="https://i.imgur.com/gWH7NLm.jpg" result="texture-img" width="256" height="256"/>
        <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile" ></feTile>
        <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"/>
        <feBlend in="SourceGraphic" in2="composite" mode="multiply"/>
      </filter>
    
    </defs>
    
    <g>
        <g filter="url(#texture)">
            <image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
        </g>
    </g>
    
</svg>

Мне пришла в голову мысль проверить, как inkscape применяет текстуры материала

...