Question

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

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

Here's a fiddle包含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>

但是当我在我的服务器上托管它时，它不起作用。请参阅this fiddle。

<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文件，但似乎无效。 Fiddle。有人可以检查.svg吗？形状在Illustrator中看起来应该是这样。

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

0 个答案: