This svg
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 2 2" width="100" height="100"><filter id='water' x='0%' y='0%' width='100%' height='100%'><feTurbulence baseFrequency="1 10" result="NOISE"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter><g filter="url(#water)"><polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon></g><g stroke="red" stroke-width="0.05" fill="transparent"><polygon points="1.0,0.0 0.5000000000000001,0.8660254037844386 -0.4999999999999998,0.8660254037844387 -1.0,1.2246467991473532e-16 -0.5000000000000004,-0.8660254037844384 0.5000000000000001,-0.8660254037844386"></polygon></g></svg>renders like this
Image may be NSFW.
Clik here to view.
I was expecting the #water content to remain within the polygon, but it seems to be filling the polygon's bounding rectangle.
How can I restrict the #water filter such that it only effects the interior of the polygon?
