python - 我可以在我用 html 和 css 中的 svg 制作的笔触动画上使线条更粗吗？

Question

我制作了一个 svg 并将其动画化以写出我的文字。我希望它有粗笔触，看起来像这个网站(http://weaintplastic.com)，一个一个地写出字母。目前，它只是同时描写字母，因此很难阅读单词，而且线条非常细。我想让笔触更粗，并为每个字母制作动画，以便使用 html 和 css 一次写出一个字母。

我在这个网站 ( https://vectr.com/ ) 上使用他们的文本功能创建了我的 svg，然后用钢笔工具勾勒出每个字母的路径，跟踪每个字母。 我使用此链接打开 svg https://jakearchibald.github.io/svgomg/并将 svg 复制为文本。然后我按照这个网站上的说明来制作动画https://dev.to/oppnheimer/you-too-can-animate-svg-line-animation-jgm .

这是我的代码的链接 https://codepen.io/anon/pen/JgEadZ#anon-signup

带有svg路径的html

 <div id="header">
        <div id="content">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640">
      <defs>
        <path d="M189.37 447.93l-8.06-17.6-18.94-41.4-17.9 41.76-9.1 21.24" id="a"/>
        <path d="M259.91 434.47l-.15 7.99-12.14 7.78-26-.48-13.85-8.26-5.63-19.61 12.49-26.27 24.08-4.55 18.82 10.35" id="b"/>
        <path d="M332.37 436.93l-20 15-20-4-9-11-5-13 5-25 13-10H320l12.37 10" id="c"/>
        <path d="M402.37 451.93h-47v-63h43" id="d"/>
        <path d="M398.37 418.43h-43" id="e"/>
        <path d="M470.46 388.93v61h-7.15l-42.94-61v61" id="f"/>
        <path d="M538.17 388.93h-53 25v63" id="g"/>
        <path d="M181.54 428.33h-38.46" id="h"/>
      </defs>
      <use xlink:href="#a" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#b" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#c" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#d" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#e" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#f" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#g" fill-opacity="0" stroke="#000"/>
      <use xlink:href="#h" fill-opacity="0" stroke="#000"/>
    </svg>
    </div>
    </div>

css with strokes
     svg {
        height: 100vh;
        width: 100vw;
        background-color: #ebedf5;
      }
      path {
        stroke-dasharray: 100;
        animation: draw 5s;
        background-color: white;
      }

      @keyframes draw {
        from {
          stroke-dashoffset: 0
        }
        to {
          stroke-dashoffset: 100;
        }
      }

我想为什么笔触这么细是因为我使用钢笔工具来描绘我的标志。我希望笔触更粗一些。

Answer 1

除了 stroke-width(用于更改笔划宽度)之外，您的代码还有其他问题。您正在使用 stroke-dasharray: 100; 和 stroke-dashoffset: 100; 但这是行不通的，因为每个字母都有不同的路径长度。在下一个示例中，我将每条路径的总长度放入动画要使用的 css 变量中。

你的路径也是向后绘制的:如果你需要你的动画从右到左运行，你需要从 stroke-dashoffset: calc(var(--len) * -1); 到 0。

希望对你有帮助。

svg {
    height: 100vh;
    width: 100vw;
    background-color: #ebedf5;
  }
  path {
    stroke-dasharray: var(--len);
    stroke-dashoffset: calc(var(--len) * -1);
    animation: draw 5s forwards;
    background-color: white;
    fill:none;
    stroke:black;
    stroke-width:3px;
  }
  
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

<div id="header">
    <div id="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="100 385 500 100">

    <path d="M189.37 447.93l-8.06-17.6-18.94-41.4-17.9 41.76-9.1 21.24" id="a" style="--len:133.43"/>
    <path d="M259.91 434.47l-.15 7.99-12.14 7.78-26-.48-13.85-8.26-5.63-19.61 12.49-26.27 24.08-4.55 18.82 10.35" id="b" style="--len:160.01"/>
    <path d="M332.37 436.93l-20 15-20-4-9-11-5-13 5-25 13-10H320l12.37 10" id="c" style="--len:154.97"/>
    <path d="M402.37 451.93h-47v-63h43" id="d" style="--len:153"/>
    <path d="M398.37 418.43h-43" id="e" style="--len:43"/>
    <path d="M470.46 388.93v61h-7.15l-42.94-61v61" id="f" style="--len:203.75"/>
    <path d="M538.17 388.93h-53 25v63" id="g" style="--len:141"/>
    <path d="M181.54 428.33h-38.46" id="h" style="--len:38.46"/>

</svg>
</div>
</div>