主页 / 问题 / 1551677
Accepted
Сергей Комыза
Asked:2023-11-16 21:24:54 +0800 CST2023-11-16 21:24:54 +0800 CST

如何使用Stroke-dashoffset实现虚线效果？

  • 772

有两个 svg。在顶部，请查看代码，使用该类，line我可以毫无问题地绘制一条线，将值stroke-dashoffset从 0 更改为 600，反之亦然。但那里的线是实心的，没有空格。

但在第二个svg中，线断了，y的值为stroke-dasharray71.7214,41.8375，stroke-dashoffset无论你放多少，都不会影响线的移动。

如何实现绘制虚线的效果，就像第一个svg中绘制实线一样？

https://codepen.io/sergeykomyza/pen/mdvqXgE?editors=1100

<svg class="line" viewBox="0 0 205 236" fill="none"><path class="route-animation" d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" stroke="black" stroke-width="2"></path></svg>

<svg class="line2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 6250 4200" style="enable-background:new 0 0 6250 4200;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#F26166;stroke-width:6;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#F26166;}
</style>
<g>
    <g>
        <path class="st0" d="M89.8,4091.1c4-9.3,8.8-20.4,14.3-33.1"/>
        <path class="st1" stroke-width="6" d="M120.6,4019.7c97.3-224.9,333.4-754.8,580.3-1031.4c310.3-347.7,471.1-118.8,727.9-238    c315.2-146.2,415.3-518.1,625.8-754.8c196.9-221.5,468.9-348.4,865.1,12.3c258.8,235.6,463.7,459.9,805.9,426.6    c291.6-28.4,485.3-362.3,612.3-748.5c119.2-362.5,148.6-735.9,447-854.4c308.1-122.2,442.9,238.6,787.4,179.9    c216.1-36.8,289-316.5,388.9-524.3c64.1-133.2,136.3-265.5,175-334.8"/>
        <path class="st0" d="M6146.4,134.1c11.2-20,17.7-31.3,17.7-31.3"/>
    </g>
</g>
</svg>

.line{
  width: 300px;
  display: block;
  margin-bottom: 100px;
}
.line path{
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}

.line2{
  width: 600px;
}
.line2 .st1{
  stroke-dasharray:71.7214,41.8375;
}
svg

1 个回答

  1. Best Answer

    #1 实线动画

    stroke-dashoffset您可以阅读有关使用此处对线条进行动画处理的信息

    • 对于动画，您需要使用以下方法找出动画线的最大长度

    JSgetTotalLength()

      <!-- Вычисление максимальной длины линии  558 -->
         var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        console.log(len);
    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" viewBox="0 0 205 236" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" >
  </path>
  </svg>

    • 计算正确的尺寸viewBox，即那些 viewBox 属性，使得 SVG 形状不会超出 SVG 画布的边框

    使用方法getBBox()

    let  bb = check.getBBox();
console.log(bb);
    <!-- Нахождение правильного значения атрибутов viewBox   -->
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="202" height="234" viewBox="1.64 0.9 202 234" style="border:1px solid red;" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" 
      
 d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" >
       
  </path>
  </svg>

    • 将旧的 viewBox 值替换为控制台中的属性值

    • 添加动画命令

      <animate attributeName="stroke-dashoffset" begin="1s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" />

    • 添加stroke-dashoffset="558" stroke-dasharray="558"

    线条动画已准备就绪

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="202" height="234" viewBox="1.64 0.9 202 234" style="border:1px solid red;" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="558"
 d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" >
       <animate attributeName="stroke-dashoffset" begin="0.5s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" />
  </path>
  </svg>

    #2 折线动画

    不可能像制作实线动画那样制作虚线外观的动画。由于属性stroke-dasarray是一条从头到尾被破折号和空格分隔的线。因此，使用Stroke-dashofset来移动它是没有用的

    解决方案是应用与应用蒙版的基础路径完全相同的蒙版。mask="url(#msk)"当fill="white"遮罩穿过底座并且只有背景可见时。当蒙版移动时，会出现一条断线，在这个地方，它不再受到蒙版的影响。
    这会产生绘制虚线的效果。

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="404" height="468" viewBox="1.64 0.9 202 234"  >
<defs>
 <mask id="msk"> 
   <path  class="route-animation" fill="none" stroke="white" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="558"
 d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" >
        <animate attributeName="stroke-dashoffset" begin="0.5s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" /> 
  </path>
 </mask>
</defs> 
 <path id="check" class="route-animation" mask="url(#msk)" fill="none" stroke="black" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="5 10"
 d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" >
      
  </path>
  </svg>

    • 1

相关问题