在svg元素上设置纹理和颜色的更有效方法？

Question

我需要在一系列svg元素上设置颜色范围，在每个元素的顶部使用相同的半透明png纹理。必须有一种更有效的方法来做到这一点......

<svg>
    <defs>
        <pattern id="texture1">
            <image xlink:href="texture.png"/>
            <rect fill="red" /> 
        </pattern>

        <pattern id="texture2">
            <image xlink:href="texture.png"/>
            <rect fill="yellow" /> 
        </pattern>

        <pattern id="texture3">
            <image xlink:href="texture.png"/>
            <rect fill="blue" /> 
        </pattern>
    </defs>
</svg>

CSS： .path1 {fill：url（#textite1）; } ...等等

这看起来非常难看。关于如何改进它的建议？