SVG剪辑路径无法正常工作 - 同一页面上的多个svgs

Question

我在一个页面上有多个svgs，并且已经从illustrator中单独导出它们。我也通过omgsvg传递了它们，减少了文件大小。

然而，当我查看完整页面时，我插入了所有单独的svgs（通过我的服务器端html渲染引擎），许多剪辑路径似乎都没有运行。有些人做了，有些做不到，我找不到原因。

Svgomg帮助但并没有完全解决问题。某些路径仍然无法正常工作。

但是，当一个svgs直接在chrome或插图程序中加载时，所有剪辑路径都能正常工作！它们只在html页面中放在一起时才会失败。

Answer 1

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

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

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