5

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

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

这是同一个文档中包含和引用的 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 中。

4

0 回答 0