そこで、svg ファイルが含まれるページのイントロを作成しました。1 つは図に色付けされ、もう 1 つは輪郭だけが描かれています。Figure にはオーバーフローが隠され、幅を広げるアニメーションがあります。このようなもの：
<div>
<figure> <img /> </figure> <-- Overflow hidden>
<img /> <-- Only borders
</div>
IE を除くすべてのブラウザで見栄えがよく、すべてのコンテナの幅で遊んでいますが、適合させてレスポンシブにすることができませんでした。何か案が ？
( jsFiddle )
$(window).ready(function() {
$('figure').animate({
width: "100vw",
}, 3000, function() {});
});body {
background-color: red;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
html {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#loading {
height: 100%;
width: 50vw;
}
#loading figure {
position: absolute;
overflow: hidden;
width: 0vw;
margin: 0;
padding: 0;
height: 100%;
}
#loading img {
width: 50vw;
position: absolute;
top: 0;
}
#loading h4 {
text-align: center;
color: #fff;
font-size: 3em;
font-weight: 300;
position: absolute;
top: 25vh;
width: 50vw;
z-index: 2;
}<body>
<div id="loading">
<figure>
<img src="http://imgh.us/test-color.svg">
</figure>
<img src="http://imgh.us/test_68.svg">
</div>
</body>