通过iframe加载SVG

时间:2019-04-17 19:19:49

标签: css svg

我经常使用嵌入式SVG来保持使用CSS对其进行操作的能力-无论是用于悬停效果还是动画。

通常有些SVG可能会很大,一旦您开始在页面上获取一些SVG,不仅代码变得凌乱,而且浏览器需要加载更多数据(因为我的理解是内联SVG不会这样做) t缓存)。

我遇到了以下通过iframe加载SVG,然后删除iframe的实现。当您获得内嵌svg的好处以及通过单个文件控制该SVG的好处(应该进行更改或编辑)时,它看起来很整洁。

Loading svg via iframe codepen

<iframe src="signal.svg" onload="this.before(this.contentDocument.children[0]); this.remove();"></iframe>

从安全角度来看,此方法安全吗?我知道iframe会受到很多打击,我不能说我曾经使用过iframe,但是使用iframe是否有问题?是否有其他方法可以在没有iframe的情况下实现同一目的,并保持通过CSS操纵SVG的能力?

0 个答案:

没有答案