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

1 ответ 1

0

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.