Answer the question
In order to leave comments, you need to log in
How to overlay an SVG outline on an image?
I created the following animation: the outline of the house appears on the screen, and after that, instead of the outline, the image of this house itself appears.
As soon as I uploaded this animation to the site, the outline of the house moved down to the right. How to make them match?
https://vincent-job.codio.io/ block with a picture of a house and its outline in the block "What is polyurethane foam insulation?" (after the block "Why choose us?").
HTML:
<div class="column12">
<img id="index" class="fadeIn fadeIn-5s fadeIn-Delay-5s" src="svg/dom.jpg" alt="">
<svg version="1.1" id="Layer_1" class="fadeOut fadeOut-3s fadeOut-Delay-3s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1200px" height="570px" viewBox="0 0 1200 570" style="enable-background:new 0 0 1200 570;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:5;}]]>
</style>
<path class="st0" d="M798.5,402l-5,3.5l-0.5,7l-348.5,76l-70-199.5l-8.5,14l-10.5-4l-0.5-4.5L521,18l6.5-4.5c0,0,9.5,4,10,5.5
s-2.5,6-2.5,6l53.667,36.667L732,56.333L732.667,61l-2,9.333L728,73.667L707.334,77L720,133l4,0.667l8.667,8.667l3.333,1.333
l0.667,6.667l-4.667,6l69.334,47.333l8.666,2l2,6l-1.333,4L809.334,219l0.666,6.667l-8.666,8.667l-2.667,5.333L795.334,241
l-10.667,10L798.5,402z"/>
</svg>
</div>
.st0 {
stroke-dasharray: 1608;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1600;
}
to {
stroke-dashoffset: 0;
}
}
#index {
position: relative;
z-index: -1;
}
#Layer_1 {
position: absolute;
z-index: 1;
}
Answer the question
In order to leave comments, you need to log in
Decided! Set the image to position: absolute; the contour has position: relative; Plus, I lengthened the contour itself, because it was not completed until the end.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question