<svg xmlns="http://www.w3.org/2000/svg" font-size="32px">
<defs>
    <linearGradient id="g" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse">
        <stop stop-color="#f00" stop-opacity="1" offset="0"/>
        <stop stop-color="#000" stop-opacity="0.5" offset="1"/>
    </linearGradient>
</defs>

<text y="30" font-size="20px">You should see red, black, red, black text all rotated 45deg, translated by 100px</text>

<g transform="rotate(45)" fill="url(#g)">
    <text x="50" y="50">TEST</text>
</g>

<g transform="translate(100,0)">
    <g transform="rotate(45)">
        <text x="50" y="50">TEST</text>
    </g>
</g>

<g transform="translate(200, 0), rotate(45)" fill="url(#g)">
	<text x="50" y="50">TEST</text>
</g>


<g transform="translate(300, 0), rotate(45)">
	<text x="50" y="50">TEST</text>
</g>

<text y="170" font-size="20px">You should see the same pattern again, just a bit scaled, by the viewBox of an inner svg</text>

<svg viewBox="0 0 400 400">
	<g transform="rotate(45)" fill="url(#g)">
    	<text x="100" y="100">TEST</text>
	</g>

	<g transform="translate(100,0)">
    	<g transform="rotate(45)">
        	<text x="100" y="100">TEST</text>
		</g>
	</g>

	<g transform="translate(200, 0), rotate(45)" fill="url(#g)">
		<text x="100" y="100">TEST</text>
	</g>

	<g transform="translate(300, 0), rotate(45)">
		<text x="100" y="100">TEST</text>
	</g>
</svg>

</svg>