主页 / 问题 / 1165865
Accepted
Leks
Asked:2020-08-14 16:45:35 +0000 UTC2020-08-14 16:45:35 +0000 UTC

为什么圆的 stroke-dashoffset 动画不起作用？

  • 772

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='0,314;314,0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

svg

2 个回答

  1. Best Answer

    你试图动画stroke-dashoffset它是由一个数字设置的，并且values在属性中放入了成对的值，显然是从属性中复制的stroke-dasharray

    这样做：

    values='314;0'

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314;0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

    • 3

    1. Q 的答案中的@Strangerstroke-dashoffset
      使用 values 处 的属性来进行动画处理values="314;0"，这对应于将行首的偏移量从最大值（314）更改为零。从而实现了从零画线到最大值（整圆）的动画

    2. 动画的时候stroke-dasharray，也用到了两个值，values="0, 314;314, 0
      动画的起始值是0, 314，其中0是破折号的长度，314是空格的长度，所以开头的线是不可见的。动画的
      最终值为314, 0，其中 314 是破折号的长度。所以这条线将被完全绘制

    因此，您的代码最初是正确的，但犯了一个错误：stroke-dashoffset您应该改为编写stroke-dasharray

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0,314;314,0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

    在我看来，有帮助的动画stroke-dasharray包含更多的可能性。

    例如，使用两对参数stroke-dasharray，您可以制作从一个点开始用两条单独的线填充圆的相同动画

    值="0, 157 0, 157; 0, 0, 314, 0"

    中风破折号=“0”

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='0' stroke-dasharray='0, 157 0, 157' stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

    另一个选项
    用stroke-dashoffset="157"
    动画的起点偏移半圈

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dasharray="0, 157 0, 157"  stroke-dashoffset="157"  stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

    通过更改stroke-dashoffset，您可以从圆上的任何点开始动画

    例如，当stroke-dashoffset="78.5"起点移动四分之一圆时314 / 4 = 78.5

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dasharray="0, 157 0, 157"  stroke-dashoffset="78.5"  stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

    • 2

相关问题