Question

我想尝试制作动画 - ＆gt; http://www.heropatterns.com，即电路板背景图案。 E.g模拟电路板上10％线路上的流动电流。

首先，我尝试实施以下内容 - ＆gt;安全：//css-tricks.com/svg-line-animation-works导致以下非工作代码：

SVG

<svg width="304px" height="304px" viewBox="0 0 304 304" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>Artboard 3 Copy 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Artboard-3-Copy-2" fill="#000000">
        <path class="path" d="M44.1000181...>

CSS

body{
background-color: #DFDBE5;
background-image: url("icons/circuit-board.svg");
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

这可能在背景图案上吗？我错过了什么或在正确的轨道上？

我想要当前的流程..如果表现得有点像这样 - ＆gt; http://jsfiddle.net/isherwood/hstqcrgk/

Answer 1

对于什么有价值的东西，我做了一个类似您所指的代码段。您可以在此处查看其实时版本。 https://infographic.koalafiedcoder.com/animation/board

但是基本上，您需要为基本线设置动画并手动绘制它们。您可以使用 3个重叠的SVG 进行此操作，并通过 stroke-dasharray ， stroke-dashoffset 和笔触颜色对其进行动画处理。然后，在SVG上手动绘制这些线。如果要使其对称设计，建议您在SVG上应用一个临时坐标点。

如果您想详细介绍，我实际上写了一篇关于此的博客文章。 Animating a Basic Line和Drawing a Circuit Board

动画svg背景图案

1 个答案: