SVG clip-pathが動作しません - 同じページに複数のsvgがあります

Question

私は1ページに複数のsvgを持ち、イラストレーターから個別にエクスポートしました。私はまた、omgsvgを通してファイルサイズを減らしました。

しかし、（サーバー側のHTMLレンダリングエンジンを使用して）私のすべての個別のsvgが挿入された完全なページを見ると、クリップのパスの多くは機能していないようです。いくつかはして、いくつかはしない、私はなぜ動作することはできません。

Svgomgは問題の解決に役立ちましたが、完全に解決しませんでした。一部のパスはまだ機能しません。

しかし、すべてのクリップパスは、個々のsvgとして一度に1つずつ、クロムに直接ロードするか、イラストプログラムで正常に動作します！ htmlページにまとめると失敗します。

Answer 1

この問題の原因は、svgエクスポート中にクリップパスがイラストプログラムによって選択された標準化されたIDを使用して定義されることです。複数のファイルをエクスポートすると、これらのファイルのそれぞれが同じID名を使用する可能性があります。 Svgomgは文字、a、bを使用します... IllustratorはSVGID_1_、...を使用します。

覚えておく必要があるのは、HTMLページ上のIDの役割です。

IDは一意である必要があります。個別にエクスポートされた複数のファイルを挿入するときに同じIDが複数回定義されているため、クリップパスが機能しません。解決策は、あなたのhtmlページ全体を考えることであり、ページ上にあるすべてのイメージのIDが一意であることを確認することです。