Question

我有以下svg：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
  <defs>
    <style>.cls-1{fill:url(#linear-gradient);}</style>
    <linearGradient id="linear-gradient" x1="-28.83" y1="770.92" x2="771.05" y2="-28.95" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#e91e63"/>
      <stop offset="0.18" stop-color="#ea2763"/>
      <stop offset="0.49" stop-color="#ee4163"/>
      <stop offset="0.88" stop-color="#f46a63"/>
      <stop offset="0.99" stop-color="#f67863"/>
    </linearGradient>
  </defs>
  <title>Asset 5</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_5" data-name="Layer 5">
      <path class="cls-1"
            d="M602.54,800H.25L365.34,458.18,170.54,170.85h458.1v115H387.44L468.91,406a97.51,97.51,0,0,1-14.06,125.9L291.34,685h311.2A82.58,82.58,0,0,0,685,602.48V115H115V583.93H0V0H800V602.48C800,711.39,711.42,800,602.54,800Z"/>
    </g>
  </g>
</svg>

如您所见，这是一个<path>的SVG，其笔触具有此渐变：

<linearGradient id="linear-gradient" x1="-28.8" y1="770.96" x2="771.08" y2="-28.92" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#e91e63"></stop>
  <stop offset="0.18" stop-color="#ea2763"></stop>
  <stop offset="0.49" stop-color="#ee4163"></stop>
  <stop offset="0.88" stop-color="#f46a63"></stop>
  <stop offset="0.99" stop-color="#f67863"></stop>
</linearGradient>

到目前为止，一切都很好。现在，我想首先显示它具有白色的svg，然后将颜色设置为动画。所以我尝试做：

@keyframes drawLogo {
    from { stroke: url(#linear-gradient-white) }
    to { stroke: url(#linear-gradient); }
}

但渐变立即出现。我希望它轻松显示。

Answer 1

正如罗伯特·朗森（Robert Longson）所评论的那样，您可以尝试使用SMIL动画来设置停止色的动画，如下所示：

.cls-1{fill:url(#linear-gradient);
 }

<svg width="200" viewBox="0 0 800 800">
  <defs>
    
    <linearGradient id="linear-gradient" x1="-28.83" y1="770.92" x2="771.05" y2="-28.95" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff">
        <animate attributeName="stop-color"
       attributeType="XML"
       values="#fff;#e91e63;#fff"
       dur="5s"
       repeatCount="indefinite"/>
      </stop>
      <stop offset="0.99" stop-color="#fff">
        <animate attributeName="stop-color"
       attributeType="XML"
       values="#fff;#f67863;#fff"
       dur="5s"
       repeatCount="indefinite"/>
      </stop>
    </linearGradient>
    
   
  </defs>
  <title>Asset 5</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_5" data-name="Layer 5">
      <path class="cls-1"
            d="M602.54,800H.25L365.34,458.18,170.54,170.85h458.1v115H387.44L468.91,406a97.51,97.51,0,0,1-14.06,125.9L291.34,685h311.2A82.58,82.58,0,0,0,685,602.48V115H115V583.93H0V0H800V602.48C800,711.39,711.42,800,602.54,800Z"/>
    </g>
  </g>
</svg>

还需要填充以免中风

更新

OP正在询问：

您能解释一下为什么我必须使用填充而不是笔划吗

这是因为您的封闭路径开始使用填充。

要使用笔触，您必须将路径绘制为笔触，例如：

<svg width="200" viewBox="0 0 800 800">
  <defs>
<linearGradient id="linear-gradient" x1="-28.83" y1="770.92" x2="771.05" y2="-28.95" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#e91e63"/>
      <stop offset="0.18" stop-color="#ea2763"/>
      <stop offset="0.49" stop-color="#ee4163"/>
      <stop offset="0.88" stop-color="#f46a63"/>
      <stop offset="0.99" stop-color="#f67863"/>
    </linearGradient>
</defs>
    <path id="theStroke" stroke="url(#linear-gradient)" fill="none"  stroke-width="130" d="M55,600V55H755V500C755,700 700,725 600,725 H155L420,475Q455,455 400,375L300 250H635" />
</svg>

我是手动完成的，并不完美。但是，您可以使用必须遮盖笔划的路径，如下所示：

<svg width="200" viewBox="0 0 800 800">
  <defs>
<linearGradient id="linear-gradient" x1="-28.83" y1="770.92" x2="771.05" y2="-28.95" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#e91e63"/>
      <stop offset="0.18" stop-color="#ea2763"/>
      <stop offset="0.49" stop-color="#ee4163"/>
      <stop offset="0.88" stop-color="#f46a63"/>
      <stop offset="0.99" stop-color="#f67863"/>
    </linearGradient>
    <mask id="m">
       <path fill="white" d="M602.54,800H.25L365.34,458.18,170.54,170.85h458.1v115H387.44L468.91,406a97.51,97.51,0,0,1-14.06,125.9L291.34,685h311.2A82.58,82.58,0,0,0,685,602.48V115H115V583.93H0V0H800V602.48C800,711.39,711.42,800,602.54,800Z"/>
    </mask>

  </defs>

  <path id="theStroke" stroke="url(#linear-gradient)" fill="none"  stroke-width="160" d="M55,600V55H755V500C755,700 700,725 600,725 H155L420,475Q455,455 400,375L300 250H635" style="mask: url(#m)"/>
</svg>

现在，如果您愿意，可以尝试对笔划进行动画处理，但是路径具有锐角，并且动画不会如您所愿的那样发生：

#theStroke{
stroke-dasharray:3428; 
stroke-dashoffset:3428;
animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="200" viewBox="0 0 800 800">
  <defs>
<linearGradient id="linear-gradient" x1="-28.83" y1="770.92" x2="771.05" y2="-28.95" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#e91e63"/>
      <stop offset="0.18" stop-color="#ea2763"/>
      <stop offset="0.49" stop-color="#ee4163"/>
      <stop offset="0.88" stop-color="#f46a63"/>
      <stop offset="0.99" stop-color="#f67863"/>
    </linearGradient>
    <mask id="m">
       <path fill="white" d="M602.54,800H.25L365.34,458.18,170.54,170.85h458.1v115H387.44L468.91,406a97.51,97.51,0,0,1-14.06,125.9L291.34,685h311.2A82.58,82.58,0,0,0,685,602.48V115H115V583.93H0V0H800V602.48C800,711.39,711.42,800,602.54,800Z"/>
    </mask>
 
  </defs>

  <path id="theStroke" stroke="url(#linear-gradient)" fill="none"  stroke-width="160" 
            d="M55,600V55H755V500C755,700 700,725 600,725 H155L420,475Q455,455 400,375L300 250H635" style="mask: url(#m)"/>
</svg>

将笔触颜色过渡到笔触渐变

1 个答案:

更新