SVG图像问题，尝试制作动画但stroke-dasharray不起作用

Posted 2023-03-06

【中文标题】SVG图像问题，尝试制作动画但stroke-dasharray不起作用

【英文标题】：SVG image problem, trying to make an animation but stroke-dasharray doesn't work

【发布时间】：2020-09-16 02:29:31

【问题描述】：

我的 SVG 图像有问题。我想制作动画。当我在 CSS 中使用 stroke-dasharray 时，我的图像不会改变。这是我的代码。我想得到一些帮助。

---

<svg 
                id="logo"
                  viewBox="0 0 39 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d)">
                <path d="M26.8047 26.0938H12.5078L9.29688 35H4.65625L17.6875 0.875H21.625L34.6797 35H30.0625L26.8047 26.0938ZM13.8672 22.3906H25.4688L19.6562 6.42969L13.8672 22.3906Z" fill="white"/>
                </g>
                <defs>
                <filter id="filter0_d" x="0.65625" y="0.875"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                <feOffset dy="4"/>
                <feGaussianBlur stdDeviation="2"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
                </filter>
                </defs>
                </svg>

---

这是我的 CSS 代码：

---

body 
  font-family: 'Nunito', sans-serif;
  width: 100%;
  height: 100vh;


#logo
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);


#logo path:nth-child(1)
    stroke-dasharray: 200px;
    stroke-dasharray: 50px;

---

【问题讨论】：

不要在属性中使用像素，这是不必要的。还有你为什么要使用数组两次。

动画在哪里？

像素不会改变任何东西。

我正准备使用stroke-dasharray创建一个动画。

你能把这段代码写在这里吗？ @enxaneta

【参考方案1】：

我不太确定这是否是您要问的。这就是我的评论：

在过滤组之外，我添加了一个使用元素：<use xlink:href="#a" id="theUse" />。在 css 中，我使用的是您提供给 #logo path:nth-child(1) 的样式

body 
  font-family: 'Nunito', sans-serif;
  width: 100%;
  height: 100vh;


#logo
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);


#theUse
    stroke:silver;
    /*stroke-dasharray: 200px;*/
    stroke-dasharray: 50px;

<svg id="logo"  viewBox="0 0 39 43" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d)">
    <path id="a" d="M26.8047 26.0938H12.5078L9.29688 35H4.65625L17.6875 0.875H21.625L34.6797 35H30.0625L26.8047 26.0938ZM13.8672 22.3906H25.4688L19.6562 6.42969L13.8672 22.3906Z" fill="white" />

  </g>
<use xlink:href="#a" id="theUse" />
  <defs>
    <filter id="filter0_d" x="0.65625" y="0.875"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
      <feOffset dy="4" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
    </filter>
  </defs>
</svg>