时间戳

首页 > 解决方案 > 在 Css svg Animation 中，我无法为 Á 对象设置动画以遵循路径

css - 在 Css svg Animation 中，我无法为 Á 对象设置动画以遵循路径

问题描述

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">



	.FollowPath{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;animation:draw 2s forwards infinite;stroke-dasharray:936}
	
	.Cap{fill:#000000;stroke:#000000;stroke-width:1;stroke-miterlimit:10; position: absolute;
  overflow: hidden; }
	.Lift{ z-index: 1;animation:move 2s linear  infinite; offset-path:path('M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06')}
	@keyframes draw{
	from{
	stroke-dashoffset:0;
	}
	to{
	stroke-dashoffset:-936;
	}
	}
	
	@keyframes move{
	from{
	 motion-offset: 0%;
	offset-distance:0%;
	}
	to{
	motion-offset: 100%;
	offset-distance:100%;
	}
	}
</style>

<path class="Cap Lift" d="M566,502.5L469.5,596c-4.3,4.1-10.6,5.2-14,2.4l0,0c-3.4-2.8-2.8-8.6,1.5-12.7l96.5-93.5
	c4.3-4.1,10.6-5.2,14-2.4l0,0C570.9,492.6,570.3,498.3,566,502.5z"/>
<path class="FollowPath" d="M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06"/>


</svg>

我想问它没有按预期工作的问题是什么，即飞机必须遵循路径。尽管我尝试了许多不同的方法，但输出出乎意料，请帮助。

标签： cssanimationsvg

解决方案

您的错误是您绘制Cap Lift. 路径应该在 svg 画布的原点绘制，例如：<path d="M0,0 L100,0 100,20 0,20z"/>

同样在我已经注释掉的css中position: absolute;，并且z-index: 1;-在svg中没用

.FollowPath {
  fill: none;
  stroke: #ff0000;
  stroke-width: 4;
  stroke-miterlimit: 10;
  animation: draw 2s forwards infinite;
  stroke-dasharray: 936;
}

.Cap {
  fill: #000000;
  stroke: #000000;
  stroke-width: 1;
  stroke-miterlimit: 10;
  /*position: absolute;
  overflow: hidden;*/
}
.Lift {
  /*z-index: 1;*/
  animation: move 2s linear infinite;
  offset-path: path("M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06");
}
@keyframes draw {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -936;
  }
}

@keyframes move {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

svg{border:1px solid}
<svg viewBox="0 0 1920 1080" >
<path class="Cap Lift"
      d="M0,-10
         L100,-10 100,10 0,10z"/>
<path class="FollowPath" d="M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06" /> 
</svg>

推荐阅读