如何使内嵌SVG缩放全屏到背景大小并仍然可以动画?

时间:2015-06-18 03:49:42

标签: javascript html css svg frontend

可以使用背景css很好地缩放SVG或图像,例如:

.svg_background {
    background: url("example.svg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    position: absolute;
}

但是,我不认为你可以做这样的CSS动画。我尝试了一个部分解决方法,我将SV64编码到URL引用中,并且能够以这种方式包含内联CSS样式,但问题是内联CSS样式似乎没有办法添加必要的关键帧动画。

因此,最简单的解决方案是保持SVG完全内联,并找出一种在没有背景相关CSS的情况下调整大小的方法。

这样,CSS动画可以在SVG中完成。

如何调整内联SVG或图像的大小以调整为全屏?

谢谢!

0 个答案:

没有答案