Question

我正在尝试将纹理色调应用于SVG 它工作得很好，但我需要将纹理作为一个平铺，以获得更好的图像质量

<filter id="composite" x="0" y="0" width="100%" height="100%">
    <feImage result="sourceTwo" xlink:href="_link_" />
    <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="1"/>
</filter>

如何用同一图像的图块替换feImage

jsFiddle

Answer 1

这就是feTile原语的用途 - 但Chrome中存在一个回归错误，用于剪辑内容 - 这是报告并且已经检查了修复程序（但现在仍然是错误的）。

<svg width="500px" height="600px" viewBox="0 0 500 600">
    <defs>
		<filter id="composite" x="0%" y="0%" width="100%" height="100%">
		    <feImage result="sourceTwo" xlink:href="http://demo.prestalife.net/media/wood.jpg" width="34" height="34"/>
            <feTile result="tiledImage"/>
		    <feComposite in="SourceGraphic" in2="tiledImage" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
		</filter>
    </defs>
    
    <text x="0" y="20">Original image</text>
    <image width="34" height="34" x="0" y="30" xlink:href="http://demo.prestalife.net/media/wood.jpg" />
    
    <g filter="url(#composite)">
        <rect fill="red" width="100%" height="100%" x="0" y="80" />
    </g>
</svg>

将纹理贴图色调应用于SVG

1 个答案: