blocks|key|3987001|text|您可以为线条指定一个stroke-dashoffset，并将其动画设置为0。为了计算stroke-dasharray和stroke-dashoffset的值，我使用了getTotalLength()方法来计算stroke-dasharray和stroke-dashoffset的值。我希望它能帮上忙。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3987002|​|3987003|svg{background:#efefef;width:100vh}
rect,line{stroke:black;+fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation:+om+1s+linear+forwards;}


@keyframes+om+{
++to+{
++++stroke-dashoffset:+0;
++}
}|code-block|syntax|javascript|3987004|<svg+viewBox+=+"0+0+100+70">++
++<rect+x="10"+y="10"+width="80"+height="50"+/>
++<line+id="om"+x1="90"+y1="60"+x2="10"+y2="10"+/>
</svg>|3987005|3987006|这是使用m到o和l到n来设置两条线的动画:只需将x1的值更改为x2，反之亦然。y也是如此。这将改变直线的方向。|3987007|3987008|svg{background:#efefef;width:100vh}
rect,line{stroke:black;+fill:none}

#mo,#ln{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation:+om+1s+linear+forwards;}


@keyframes+om+{
++to+{
++++stroke-dashoffset:+0;
++}
}|3987009|<svg+viewBox+=+"0+0+100+70">++
++<rect+x="10"+y="10"+width="80"+height="50"+/>
++
++<line+id="mo"+x2="90"+y2="60"+x1="10"+y1="10"+/>
++<line+id="ln"+x2="90"+y2="10"+x1="10"+y1="60"+/>
</svg>|3987010|3987011|我对#om和#nl使用相同的动画|3987012|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength^0|A|H|16|G|1N|H|2W|G|3D|H|2B|G|0|0|0|0|0|0|0|0|0|0|0|2|3|6|3|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1O|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1P|8|@]|D|@]|E|$]]|$1|R|3|G|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1R|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1S|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1T|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

<p>You can give your lines a <code>stroke-dashoffset</code> and animate it to 0. To calculate the values for <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> I've used the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength" rel="nofollow noreferrer">getTotalLength()</a> method to calculate the values for <code>stroke-dasharray</code> and <code>stroke-dashoffset</code>. I hope it helps.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox = "0 0 100 70"&gt;  
  &lt;rect x="10" y="10" width="80" height="50" /&gt;
  &lt;line id="om" x1="90" y1="60" x2="10" y2="10" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>And this is with both lines animated this time with m to o and l to n: just change the values for x1 to x2 and viceversa. The same for y. This will change the direction of the line.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#mo,#ln{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox = "0 0 100 70"&gt;  
  &lt;rect x="10" y="10" width="80" height="50" /&gt;
  &lt;!--&lt;line id="om" x1="90" y1="60" x2="10" y2="10" /&gt;
  &lt;line id="nl" x1="90" y1="10" x2="10" y2="60" /&gt;--&gt;
  &lt;line id="mo" x2="90" y2="60" x1="10" y1="10" /&gt;
  &lt;line id="ln" x2="90" y2="10" x1="10" y1="60" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>I'm using the same animation for both <code>#om</code> and <code>#nl</code></p>


<p>I am trying add up an animation diagonally. The rectangle height and width I know (dynamically adding up). Now trying to animated a line from N to L, or O to M or other ways.
I tried with svg and increasing the line's x1, y1, x2, y2 but this is getting complicated. Any easier or simpler solution?</p>

<p><a href="https://i.stack.imgur.com/1UkfB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1UkfB.jpg" alt="enter image description here"></a></p>


How to animate a line of a rectangle's diagonals?

我正在尝试添加一个对角的动画。我知道的矩形的高度和宽度(动态累加)。现在尝试从N到L，或从O到M或其他方式设置线的动画。我尝试了svg和增加行的x1，y1，x2，y2，但这变得越来越复杂。有更简单或更简单的解决方案吗？​​

问如何动画一条矩形的对角线？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动画一条矩形的对角线？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动画一条矩形的对角线？
EN