将SVG与背景图像对齐

Question

I have a full page background image and an SVG on top of it . The image is a mountain and I want my SVG to follow the crease of the mountain.

However, when I resize the page, the SVG shifts away from the mountain creast.

What I want to achieve (even when I resize):

SNIPPET:

 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> 

In case resize is not possible in the above snippet: CODEPEN https://codepen.io/SimeriaIonut/pen/RxzMRe

What I tried is to make both the background and the SVG the same size, so when I resize the image they would both behave the same (doesn't work).

I also tried to apply object-fit: contain to both of them but with no success.

I know this is possible, I just don't really know how to. I looked on other topics but none of them seem to answer my question.

Thank you!

Answer 1

In order to avoid disagreements between the coordinates of the path and fragments of the image of the mountain when the scale is changed, it is necessary that they are in the same coordinate system SVG

Therefore, we add the image of the mountain with the help of the tag <image> inside 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> 

Now, when zooming in, the route seems to be glued to the mountain.