来自外部文件的带有 SVG 的剪辑路径

Question

我正在使用 SVG，想看看是否可以将 SVG 存储在外部文件中并使用 调用它url(link)，因为 FireFox 在 CSS 中声明形状时不支持剪辑路径。

但是，当链接到外部文件时，剪辑根本不起作用。

这是在同一文档中包含和引用的 SVG 的小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(#svgPath); -webkit-clip-path: url(#svgPath)" />

<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path  stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

但是当我将它托管在我的服务器上时包含它时，它不起作用。看看这个小提琴。

<img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" style="clip-path: url(rvervuurt.com/svg.html#svgPath); -webkit-clip-path: url(rvervuurt.com/svg.html/#svgPath)" />

url(#svgPath)在这种情况下，我不明白和之间有什么区别url(external.com/#svgPath)。应该以不同的方式包含它吗？

更新：我尝试将其添加为.svg文件，但似乎不起作用。小提琴。有人可以检查 .svg 吗？形状看起来与 Illustrator 中应有的形状相同。