0

Materialisecss のトーストを SVG に統合するのが好きです。cssとjsをインポートすることはできMaterializecssますが、svg をロードすると、Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null

例: http://www.idoodler.de/svgTest.svg

これを機能させる方法はありますか？

4

1 に答える 1

0

私はしばらくこれに苦労しました。画像を HTML エンコードしてみました。base64 でエンコードされた画像ソースを使用し、直接 SVG インライン画像ソースを使用しました。これらのどれも機能しませんでしたが、それは主に引用符が原因です。プレーンな古い URL が最も単純であることが証明されました。（そして最後に考えた方法）

解決策は最終的に非常に簡単であることがわかりました。 

Materialize.toast('<img src=\"http://www.idoodler.de/svgTest.svg\" />', 5000);

ただし、エスケープは一種の見苦しく、エラーが発生しやすいものです。初めてこれが機能しましたが、Materialize.toast() を直接トリガーするのではなく、独自の関数を呼び出しました。 

<script>
    function imageToast(imageUrl) {
        Materialize.toast('<img src="' + imageUrl + '" />', 5000);
    }
</script>

imageToast(http://www.idoodler.de/svgTest.svg);

画像ソースを独自の関数でラップすることにより、あらゆる種類の引用符を扱う必要がなくなります。このソリューションは、純粋な SVG または base64 を使用した画像のインライン ソースでも機能するはずです。

私の推測では、あなたはこの種のダイナミクスを望んでいるのではないでしょうか? 私の提案は、必要な SVG を生成して保存し、 toast() を URL に直接適用することです。

ソース: https://css-tricks.com/probably-dont-base64-svg/

ここにあなたが試すための Codepen があります: http://codepen.io/anon/pen/GJrvpj

幸運を。

于 2015-05-29T22:35:18.780 に答える