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

Question

这个问题在这里已经有了答案:





clipPath in multiple SVG tags

(1 个回答)


4年前关闭。




我在一页上有多个 svg，并已从 illustrator 中单独导出它们。我还通过 omgsvg 传递了它们，从而减小了文件大小。

但是，当我查看插入了所有单独 svg 的完整页面时(通过我的服务器端 html 渲染引擎)，许多剪辑路径似乎无法正常工作。有些可以，有些不可以，我不知道为什么。

Svgomg 有所帮助，但并没有完全解决问题。一些路径仍然不起作用。

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

Answer 1

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

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

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