我在一页上有多个 svgs,并从 illustrator 中单独导出它们。我还通过 omgsvg 传递它们,这减少了文件大小。
然而,当我查看插入了所有单独 svgs 的完整页面(通过我的服务器端 html 渲染引擎)时,许多剪辑路径似乎不起作用。有的可以,有的不行,我不明白为什么。
Svgomg 提供了帮助,但并没有完全解决问题。有些路径仍然无法运行。
但是,当直接在 Chrome 或插图程序中一次加载一个单独的 svgs 时,所有剪辑路径都可以正常工作!它们只有在 html 页面中组合在一起时才会失败。
造成此问题的原因是,在 svg 导出期间,将使用由插图程序选择的标准化 ID 来定义剪辑路径。如果导出多个文件,则每个文件很可能使用相同的 ID 名称。Svgomg 仅使用字母,a,b... Illustrator 使用 SVGID_1_,...
你需要记住的是 html 页面上 ids 的作用。
Id 必须是唯一的。剪辑路径无法工作,因为当您插入多个单独导出的文件时,您多次定义了相同的 ID。解决方案是将您的 html 页面视为一个整体,并确保页面上所有图像的 id 都是唯一的。