R
R
rinatoptimus2014-09-16 22:19:19
css
rinatoptimus, 2014-09-16 22:19:19

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>

CSS:
.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

2 answer(s)
R
rinatoptimus, 2014-09-17
@rinatoptimus

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.

S
Skifskif, 2014-09-17
@Skifskif

The contour is combined with the image, but now the line does not appear to the end.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question