SVG 剪辑路径不起作用 - 同一页面上有多个 svgs

mwa*_*wal 6 svg clip-path

我在一页上有多个 svgs,并从 illustrator 中单独导出它们。我还通过 omgsvg 传递它们,这减少了文件大小。

然而,当我查看插入了所有单独 svgs 的完整页面(通过我的服务器端 html 渲染引擎)时,许多剪辑路径似乎不起作用。有的可以,有的不行,我不明白为什么。

Svgomg 提供了帮助,但并没有完全解决问题。有些路径仍然无法运行。

但是,当直接在 Chrome 或插图程序中一次加载一个单独的 svgs 时,所有剪辑路径都可以正常工作!它们只有在 html 页面中组合在一起时才会失败。

mwa*_*wal 8

造成此问题的原因是,在 svg 导出期间,将使用由插图程序选择的标准化 ID 来定义剪辑路径。如果导出多个文件,则每个文件很可能使用相同的 ID 名称。Svgomg 仅使用字母,a,b... Illustrator 使用 SVGID_1_,...

你需要记住的是 html 页面上 ids 的作用。

Id 必须是唯一的。剪辑路径无法工作,因为当您插入多个单独导出的文件时,您多次定义了相同的 ID。解决方案是将您的 html 页面视为一个整体,并确保页面上所有图像的 id 都是唯一的。