0

Не могу нормально подогнать теги. Дело в том, что когда я опускаю сам body на уровень svg, svg уходит вниз, а на его место встаёт body, я уже не знаю, что и делать... И что с тегом html не так? Помогите, кто сможет.

P.S. Если не поняли, но хотите помочь, скопируйте код и всё сами увидите, заранее извиняюсь, за неудобства.

#btn-download {
  cursor: pointer;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}

#btn-download:hover {
  background: rgba(34, 50, 84, 0.03);
}

#btn-download svg {
  margin-top: 550px;
  margin-left: 20px;
  fill: none;
  transform: translate3d(0, 0, 0);
}

#btn-download svg polyline,
#btn-download svg path {
  stroke: #0077FF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
  transition-delay: 0.3s;
}

#btn-download svg path#check {
  stroke-dasharray: 38;
  stroke-dashoffset: 114;
  transition: all 0.4s ease;
}

#btn-download.downloaded svg .svg-out {
  opacity: 0;
  animation: drop 0.3s linear;
  transition-delay: 0.4s;
}

#btn-download.downloaded svg path#check {
  stroke: #20CCA5;
  stroke-dashoffset: 174;
  transition-delay: 0.4s;
}

@keyframes drop {
  20% {
    transform: translate(0, -3px);
  }
  80% {
    transform: translate(0, 2px);
  }
  95% {
    transform: translate(0, 0);
  }
}

.credit {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.6;
}

.credit img {
  width: 72px;
}

.credit:hover {
  transform: scale(0.95);
}
<div id="btn-download">
  <svg width="50px" height="50px" viewBox="0 0 22 16">
    <a href="text.txt" download>
      <path d="M2,10 L6,13 L12.8760559,4.5959317 C14.1180021,3.0779974 16.2457925,2.62289624 18,3.5 L18,3.5 C19.8385982,4.4192991 21,6.29848669 21,8.35410197 L21,10 C21,12.7614237 18.7614237,15 16,15 L1,15" id="check"></path>
      <polyline points="4.5 8.5 8 11 11.5 8.5" class="svg-out"></polyline>
      <path d="M8,1 L8,11" class="svg-out"></path>
    </a>
  </svg>
</div>

3
  • я скопировал и ничего не увидел
    – meine
    26 мая 2020 в 12:33
  • @meine Растяните окно браузера на весь экран и увидите то, о чём я говорил, в левом верхнем углу
    – user390826
    26 мая 2020 в 12:37
  • я всё равно ничегоне понял, какого поведения вы хотите добиться?
    – meine
    26 мая 2020 в 13:00

1 ответ 1

0

Возможно вам следует использовать top, left, mergin-top и mergin-left только элементу div, а не элементу svg, положение которого, при использовании на него top, left, mergin-top и mergin-left, будет изменяться относительно div

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.