svg - 将 Materialisecss Toast 添加到 SVG

Question

我喜欢将来自 Materializecss 的 Toast 集成到 SVG 中。我能够导入cssand jsfrom Materializecss，但是当我加载 svg 时，我得到了Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null

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

有什么办法可以使这项工作？

Answer 1

我为此挣扎了一段时间。我尝试对图像进行 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

祝你好运。