html - 将 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="/image/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="/image/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>

现在，当放大时，路线似乎粘在了山上。