Why does this SVG filter not work in a canvas context using Chrome?

I have a SVG filter saved in a file hosted on the same website as the canvas. The canvas attempts to use that filter to draw a filtered image, but the original image is rendered instead, ignoring the filter.

The path to the SVG file is correct and the ID of the filter is correct. What am I doing wrong?

Here is the content of the “spherize.svg” file…

<svg>
    <defs>
        <filter id="sphereFilter">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
            <feOffset in="blur" dx="2" dy="2" result="offset"/>
            <feComposite in="SourceGraphic" operator="normal" in2="offset" result="final"/>
        </filter>
    </defs>
</svg>

And here is the call made in the canvas rendering function…

context.filter = "url(/resources/filters/spherize.svg#sphereFilter)";
context.drawImage(image, 0, 0, width, height);

I am using the most recent public version of Chrome (131.0.6778.205) on the most recent public version of macOS (15.1.1). Thanks for any insights.