问用于svg填充的笔画-dasharray等效
EN

Stack Overflow用户

提问于 2022-09-18 01:08:50

回答 1查看 38关注 0票数 0

是否有一个与stroke-dasharray等价的属性可用于操作SVG的填充模式？我试图获得一个手写的效果，所以内容应该逐步填写，就好像信件是在写一样。stroke-dasharray不工作，因为它动画的轮廓的字母，而不是填充。为了说明这一点，我创建了SVG路径有这个密码的fill: transparent。如果没有相应的属性来控制填充的应用，那么您能给我建议一种替代的方法来实现我想要的效果吗？

html

css

svg

国内短信0.038元/条起

99%到达率，支持发送验证码、通知和营销类短信，短信特惠低至 0.038元/条

回答 1

Stack Overflow用户

发布于 2022-09-18 03:16:42

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content=
         "width=device-width, initial-scale=1.0" />
      <style>
         .path {
         stroke-dasharray: 3000;
         stroke-dashoffset: 3000;
         animation: dash 5s linear forwards infinite;
         }
         @keyframes dash {
         to {
         stroke-dashoffset: 0;
         }
         }
      </style>
   </head>
   <body>
      <svg viewBox="0 0 640 640">
         <path class="path" fill="white"
            stroke="black" stroke-width="4"
            d="M70.74 411.89L91.42 411.89L112.09 411.89L114.39
            391.22L114.39 370.54L110.95 349.86L114.39 329.19L115.54
            308.51L115.54 287.84L125.88 270.61L146.55 269.46L167.23
            269.46L176.42 287.84L172.97 308.51L172.97 329.19L172.97
            351.01L172.97 371.69L174.12 392.36L184.46 409.59L205.14
            409.59L225.81 410.74L230.41 390.07L229.26 369.39L226.96
            348.72L226.96 328.04L231.55 307.36L235 286.69L228.11
            267.16L247.64 259.12L268.31 259.12L288.99 261.42L303.92
            275.2L299.32 297.03L297.03 317.7L297.03 339.53L298.18
            360.2L298.18 380.88L299.32 401.55L318.85 406.15L339.53
            406.15L349.86 388.92L352.16 368.24L355.61 347.57L355.61
            326.89L354.46 305.07L352.16 284.39L351.01 263.72L370.54
            256.82L391.22 256.82L411.89 260.27L411.89 280.95L411.89
            302.77L413.04 323.45L416.49 345.27L418.78 365.95L421.08
            386.62L436.01 401.55L456.69 402.7L477.36 403.85L481.96
            384.32L484.26 363.65L484.26 342.97L484.26 320L479.66
            300.47L473.92 279.8L469.32 260.27L465.88 239.59L465.88
            218.92L448.65 208.58L427.97 208.58L406.15 208.58L384.32
            208.58L362.5 208.58L341.82 208.58L321.15 208.58L299.32
            207.43L277.5 205.14L255.68 205.14L232.7 202.84L212.03
            201.69L190.2 201.69L168.38 202.84L144.26 206.28L122.43
            208.58L101.76 210.88L81.08 210.88L60.41 210.88L53.51
            231.55L50.07 252.23L47.77 274.05L47.77 295.88L46.62
            317.7L45.47 338.38L45.47 360.2L48.92 380.88L54.66
            400.41L69.59 414.19" />
      </svg>
   </body>
</html>