Задать вопрос

Как наложить контур SVG на изображение?

Создал такую анимацию: на экране вырисовывается контур дома, а после этого вместо контура появляется само изображение этого дома.
Как только я вкрячил эту анимацию на сайт, контур дома съехал вниз вправо. Как сделать так, чтобы они совпадали?
https://vincent-job.codio.io/ блок с картинкой дома и его контуром нах-ся в блоке "Что такое утепление пенополиуретаном?" (после блока "Почему выбирают нас?").
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;
}
  • Вопрос задан
  • 4325 просмотров
Подписаться 4 Оценить Комментировать
Решения вопроса 1
@rinatoptimus Автор вопроса
Решено! У картинки поставил position: absolute; у контура position: relative; плюс удлинил сам контур, тк он дорисовывался не до конца.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Skifskif
Контур совместил с изображением, но теперь линия вырисовывается не до конца.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы