将SVG与背景图像对齐

Question

我有一个完整的页面背景图像和一个顶部的SVG.图像是一座山,我希望我的SVG能够跟随山的折痕.

但是,当我调整页面大小时,SVG会从山峰中移开.

我想要实现的目标(即使我调整大小):

片段:

body,
header,
svg {
  width: 100%;
  height: 600px;
}

header {
  background: url(http://i68.tinypic.com/2wnnriv.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

svg {
  position: absolute;
}

<header>
  <svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1000" enable-background="new 0 0 1600 1000" xml:space="preserve">
<polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="999.775,503.558 1015.275,469.194
	1007.525,438.194 934.275,399.194 918.775,402.194 896.775,371.694 867.775,362.694 814.275,274.194 789.275,258.694
	781.775,248.194 "/>
                <circle fill="#FFFFFF" cx="1015.275" cy="469.054" r="3.703"/>
                <circle fill="#FFFFFF" cx="1007.369" cy="438.304" r="3.703"/>
                <circle fill="#FFFFFF" cx="934.182" cy="399.491" r="3.703"/>
                <circle fill="#FFFFFF" cx="918.807" cy="402.054" r="3.703"/>
                <circle fill="#FFFFFF" cx="896.557" cy="372.173" r="3.703"/>
                <circle fill="#FFFFFF" cx="867.557" cy="362.423" r="3.703"/>
                <circle fill="#FFFFFF" cx="814.057" cy="273.673" r="3.703"/>
                <circle fill="#FFFFFF" cx="788.557" cy="257.673" r="3.703"/>
                <circle fill="#FFFFFF" cx="781.775" cy="248.194" r="3.703"/>
                <circle fill="#FFFFFF" cx="999.942" cy="503.558" r="3.703"/>
</svg>
</header>

如果在上面的代码段中无法调整大小: CODEPEN https://codepen.io/SimeriaIonut/pen/RxzMRe

我尝试的是使背景和SVG的大小相同,所以当我调整图像大小时,它们的行为都相同(不起作用).

我也试图适用object-fit: contain于他们两个但没有成功.

我知道这是可能的,我只是不知道该怎么做.我查看了其他主题,但似乎没有人回答我的问题.

谢谢!

Answer 1

为了避免在改变比例时路径坐标与山体图像碎片之间存在分歧,必须使它们处于相同的坐标系SVG中

因此,我们<image>在svg内部 的标签的帮助下添加山的图像

<image xlink:href="https://i.stack.imgur.com/045d7.jpg" width="1600px" height="1100px" y="0" x="0"/>

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%" viewBox="0 0 1600 1100" >
    
  <image xlink:href="https://i.stack.imgur.com/045d7.jpg"  width="1600px" height="1100px" y="0" x="0"/>
    <g id="g3373" transform="translate(0,46)">
    <polyline  points="999.775 503.558 1015.275 469.194 1007.525 438.194 934.275 399.194 918.775 402.194 896.775 371.694 867.775 362.694 814.275 274.194 789.275 258.694 781.775 248.194 " stroke-miterlimit="10" style="fill:none;stroke-width:3;stroke:crimson"/>
     <circle fill="#FFFFFF" cx="1015.275" cy="469.054" r="3.703"/>
                <circle fill="#FFFFFF" cx="1007.369" cy="438.304" r="3.703"/>
                <circle fill="#FFFFFF" cx="934.182" cy="399.491" r="3.703"/>
                <circle fill="#FFFFFF" cx="918.807" cy="402.054" r="3.703"/>
                <circle fill="#FFFFFF" cx="896.557" cy="372.173" r="3.703"/>
                <circle fill="#FFFFFF" cx="867.557" cy="362.423" r="3.703"/>
                <circle fill="#FFFFFF" cx="814.057" cy="273.673" r="3.703"/>
                <circle fill="#FFFFFF" cx="788.557" cy="257.673" r="3.703"/>
                <circle fill="#FFFFFF" cx="781.775" cy="248.194" r="3.703"/>
                <circle fill="#FFFFFF" cx="999.942" cy="503.558" r="3.703"/>
  </g>
</svg>

现在,当放大时,路线似乎粘在山上.