<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 450 500">
    <defs>
        <radialGradient id="redToYellow" >
            <stop offset="0" stop-color="red" />
            <stop offset="1" stop-color="yellow" />
        </radialGradient>

        <pattern patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" overflow="visible"
                 x="0" y="0" width="30" height="15" viewBox="10 10 40 40" id="pattern">
            <circle cx="20" cy="20" r="40" style="fill: url(#redToYellow); stroke: rgb(100, 0, 0); stroke-width: 12px"/>
        </pattern>
    </defs>

    <rect x="50" y="50" width="350" height="400" style="fill:url(#pattern); stroke:black;"/>
    <rect x="1" y="1" width="448" height="498" stroke="black" fill="none"/>

    <g text-anchor="middle" font-size="10">
        <text x="225" y="20">stroked circle shouldn't be clipped in any way.</text>
        <text x="225" y="35">(stroke-width should be visible!</text>
    </g>
</svg>