javascript - 无法让 SVG 正确缩放

Question

尝试添加一个 svg 文件并让它从页面的一端缩放到重叠的两个 div 的另一端(请参见下面的模型图)

这是页面 JSFIDDLE

具体代码如下:

HTML:

<!-- Sectional Blue Background -->
  <div id="blueSection">

  </div>

<!-- /Sectional Blue Background -->

CSS

    /* Blue Sectional 3 Steps */
#blueSection {
position: relative;
transform:scale(3, 4);
-webkit-transform:scale(3, 4);
-ms-transform: scale(3, 4);
right: 80em;
}

#blueSection::before {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -80px;
left: 0;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;

}



#blueSection::after {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -63px;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari */
    transform: rotate(5deg);
}

所以现在发生的是全屏桌面模式，它就在我想要的位置，但是它一直延伸到页面的边缘之外。当您调整屏幕大小时，它看起来并不完全相同，而是完全不同的尺寸。在 chrome 上的移动设备中，它根本没有出现(还没有尝试过其他浏览器)。在桌面版 IE 中，就好像根本没有对蓝色部分进行任何编辑。

我真的不确定我做错了什么，如果我需要使用 javascript/jquery 或只是 css 我不介意走任何一条路，我只是想学习如何解决这个问题。我查看了各种文章，但看不出我做错了什么。

非常感谢所有建议!感谢您的时间!

Answer 1

为前后元素尝试 background-size: cover。