SVG 剪辑路径不起作用 - 同一页面上有多个 svg
SVG clip-path not working - multiple svgs on same page
我在一页上有多个 svg，并从 illustrator 中单独导出它们。我还通过 omgsvg 传递了它们，从而减小了文件大小。
但是，当我查看插入了所有单独 svg 的完整页面（通过我的服务器端 html 渲染引擎）时，许多剪辑路径似乎无法正常工作。有的有，有的没有，不知道为什么。
Svgomg 提供了帮助，但并未完全解决问题。有些路径仍然不起作用。
但是，当直接在 chrome 或插图程序中一次加载一个单独的 svg 时，所有剪辑路径都可以正常工作！它们只有在放在 html 页面时才会失败。
此问题的原因是在 svg 导出期间，将使用您的插图程序选择的标准化 ID 定义剪辑路径。如果您导出多个文件，这些文件中的每一个都可能使用相同的 ID 名称。 Svgomg 只使用字母 a,b... Illustrator 使用 SVGID_1_, ...
您需要记住的是 ID 在 html 页面上的作用。
ID 必须是唯一的。剪辑路径无法工作，因为当您插入多个单独导出的文件时，您不止一次定义了相同的 ID。解决方案是将您的 html 页面视为一个整体，并确保页面上所有图片的 ID 都是唯一的。
我在一页上有多个 svg，并从 illustrator 中单独导出它们。我还通过 omgsvg 传递了它们，从而减小了文件大小。
但是，当我查看插入了所有单独 svg 的完整页面（通过我的服务器端 html 渲染引擎）时，许多剪辑路径似乎无法正常工作。有的有，有的没有，不知道为什么。
Svgomg 提供了帮助，但并未完全解决问题。有些路径仍然不起作用。
但是，当直接在 chrome 或插图程序中一次加载一个单独的 svg 时，所有剪辑路径都可以正常工作！它们只有在放在 html 页面时才会失败。
此问题的原因是在 svg 导出期间，将使用您的插图程序选择的标准化 ID 定义剪辑路径。如果您导出多个文件，这些文件中的每一个都可能使用相同的 ID 名称。 Svgomg 只使用字母 a,b... Illustrator 使用 SVGID_1_, ...
您需要记住的是 ID 在 html 页面上的作用。
ID 必须是唯一的。剪辑路径无法工作，因为当您插入多个单独导出的文件时，您不止一次定义了相同的 ID。解决方案是将您的 html 页面视为一个整体，并确保页面上所有图片的 ID 都是唯一的。