<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>