Анимированные элементы SVG, искажающие в HTML - PullRequest
Новая
       37

Анимированные элементы SVG, искажающие в HTML

0 голосов
/ 26 ноября 2018

У меня есть одна веб-страница с анимированным SVG, которая идет вверх по пути.Однако при наложении разметки в мой HTML он выглядит искаженным и сдвигается к краю.Я не мог сказать, является ли расположение неправильным или анимация неправильной.Вот мой код: 

    <!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="grid-container">
    <!-- create SVG using location points -->
    <svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

        <path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
    </svg>

    <object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">

    </object>
</div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

и CSS 

.sendy{
    height: 50%;
    width: 50%;
}

/*animations*/

.sendy {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  100% {
    bottom: 100px;
  }
}

Вот ссылка на то, что происходит: https://jsfiddle.net/kimaiga/pjk7t1qb/

Есть идеи о том, что мне не хватает?

1 Ответ

0 голосов
/ 26 ноября 2018

Вам нужно изменить анимацию следующим образом: 

@keyframes MoveUpDown {
  to { transform: translateY(-100px); }
}

, а затем изменить размер в теге SVG

DEMO https://jsfiddle.net/12o8uqL4/

...