Question

我喜欢将Materialisecss中的Toast集成到SVG中。我可以从css导入js和Materializecss，但是当我加载svg时，我会Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null

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

有没有办法让这项工作？

Answer 1

我挣扎了一段时间。我尝试了HTMLencoding图像，使用base64编码的图像源，直接SVG内联图像源。我没有这些工作，这主要是由于引号。简单的旧URL被证明是最简单的。（以及我最后想到的方法）

最终解决方案非常简单：

＆＃13;

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

＆＃13;

但是，逃避是一种丑陋和容易出错的错误。我第一次使用它但是调用我自己的函数而不是直接触发Materialize.toast（）：

＆＃13;

<script>
    function imageToast(imageUrl) {
        Materialize.toast('<img src="' + imageUrl + '" />', 5000);
    }
</script>

imageToast(http://www.idoodler.de/svgTest.svg);

＆＃13;

通过将图像源包装在其自身的功能中，我们不再需要处理各种引号。此解决方案还应该使用纯SVG或base64来处理图像的内联。

我的猜测是你想要这种动态，对吧？我的建议只是生成你想要的SVG，保存它，然后直接将toast（）应用到URL。

来源： https://css-tricks.com/probably-dont-base64-svg/

这是Codepen供您尝试： http://codepen.io/anon/pen/GJrvpj

祝你好运。

将Materializecss Toast添加到SVG

1 个答案: