将纹理应用于 SVG 中的图像答案

【问题标题】：Apply a texture to an image in SVG将纹理应用于 SVG 中的图像
【发布时间】：2019-07-03 11:54:45
【问题描述】：

我正在尝试将纹理应用到图像

原创

纹理

结果（使用 PHP GD 制作）

但是对于 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

是否有另一种方法可以不对透明像素进行纹理化？

【问题讨论】：

标签： svg textures svg-filters

【解决方案1】：

我找到了一个解决方案，即通过复合过滤器将纹理传递给源图像

<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 如何应用材质纹理得到了这个想法

【讨论】：