Why is this svg filter producing content outside of the polygon which uses it?

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

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?