Question

我有一个整页背景图片和一个顶部的SVG 。图像是一座山，我希望我的SVG能够跟随山的折痕。

然而，当我调整页面大小时，SVG会远离山峦。

我想要实现的目标（即使我调整大小）：

片段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

我尝试的是使背景和SVG的大小相同，所以当我调整图像大小时，它们的行为都相同（不起作用）。

我也尝试将object-fit: contain应用于他们两个但没有成功。

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

谢谢！

Answer 1

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

因此，我们借助svg内的标签<image>添加山的图像

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

＆＃13;

<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>

＆＃13;

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

将SVG与背景图像对齐

1 个答案: