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页面上的作用。

ID必须是唯一的。剪辑路径无法正常工作，因为在插入多个单独导出的文件时，您有多次定义的相同ID。解决的办法是将你的html页面作为一个整体来考虑，并且确保你在页面上的所有图像的id将是唯一的。