svg - svg要素にテクスチャと色を設定するためのより効率的な方法は？

Question

各要素の上に同じ半透明のpngテクスチャを使用して、一連のsvg要素に色の範囲を設定する必要があります。これを行うためのより効率的な方法が必要です...

<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（＃texture1）; }...など

これはとても醜いようです。それを改善する方法についての提案？