HTML 内扭曲的动画 SVG 元素

Question

我有一个网页，其中包含沿路径向上移动的动画 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;
  }
}

这里 link 发生了什么：https://jsfiddle.net/kimaiga/pjk7t1qb/

知道我错过了什么吗？

Answer 1

您需要将动画更改为：

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

然后更改 SVG 标签中的大小

演示版https://jsfiddle.net/12o8uqL4/

HTML 内扭曲的动画 SVG 元素

Animated SVG elements distorting within HTML

html

css

svg

css-animations

svg-animate