为 SVG 笔划的虚线添加不同的颜色

Question

我是 SVG 和其他东西的新手，我正在尝试为单个笔划的不同短划线添加不同的颜色。

<style>
 .c-dashed-line__path {
 animation: c-dashed-line-path 5s forwards;
  fill: none;
  stroke: rgb(255, 32, 32);
  stroke-dasharray: 1475;
  stroke-dashoffset: 1475;
  stroke-width: 60;
}

.c-dashed-line__dash {
  fill: none;
  stroke: #FFFFFF;
  stroke-dasharray: 40 200 40 480;
  stroke-dashoffset: 40;
  stroke-width: 70;
}

@keyframes c-dashed-line-path {
  from {
    stroke-dashoffset: 1474;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<svg id="svg11"
   viewBox="0 0 2133.3333 1200"
   height="1200"
   width="2133.3333"
   version="1.1">
  <metadata
     id="metadata16">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs>
  <g
     id="layer2">
    <path
    id="c-dashed-line" class="path2"
       d="m 548.50746,29.104478 c 0,0 136.56717,279.850742 228.35821,293.283582 91.79105,13.43284 91.79105,13.43284 91.79105,13.43284 0,0 154.47758,22.38806 214.92538,134.32835 60.4478,111.9403 40.2985,203.73135 147.7612,295.52239 107.4627,91.79105 208.2089,-6.71642 380.597,114.17911"
       style="fill:none;" />
  </g>
  </defs>
  <use class="c-dashed-line__path" xlink:href="#c-dashed-line"/>
    <!-- A dashed white line that sits on top of the solid green line -->
    <use class="c-dashed-line__dash" xlink:href="#c-dashed-line"/>
</svg>

请看看我到目前为止做了什么。 https://codepen.io/geekudu/pen/QWWvqRp

我打算为每个破折号使用不同的颜色。 任何帮助表示赞赏。提前致谢

Answer 1

您可以为许多线条构建一个线性渐变，从而为您提供不同颜色的短划线 - 但它非常困难，因为您必须对其进行排列，以便渐变过渡都发生在笔划短划线之间的间隙中。如果破折号间隙太窄或线条太曲折 - 那么你必须经历严重的扭曲才能使其工作。通过自定义的笔划破折号数组使用不同的覆盖路径会更容易。

但这通常是可能的 - 这是一个适用于您的特定行的示例。

 .c-dashed-line__path {
  stroke: url(#special-gradient);
  stroke-dasharray: 200 40 200 40 480 40;
  /* this is the entire length of the line */
  stroke-dashoffset: 0;
  /* this is the entire length of the line */
  stroke-width: 60;
  
}

.c-dashed-line__overlay {
  animation: c-dashed-line-path 5s forwards;
  fill: none;
  stroke: white;
  /* this must match the background color */
  stroke-dashoffset: -1475;
    stroke-dasharray: 1475;
  /* draws a 10px dash line with a 16px gap between */
  stroke-width: 70;
  /* make the dashed line slightly bigger than the one it's covering */
}

@keyframes c-dashed-line-path {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1475;
  }
}

svg{
  width:100%;
  height:100%;
  position: absolute;
}

<svg id="svg11"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 2133.3333 1200"
   height="1200"
   width="2133.3333"
   version="1.1">
 
  <defs>
    
    <linearGradient id="special-gradient" y1="0%" y2="130%" x1="0%" x2="200%">
      <stop offset="0%"  stop-color="gold" />
      <stop offset="9%"  stop-color="gold" />
      <stop offset="9%" stop-color="red" />
      <stop offset="18.4%"  stop-color="red" />
      <stop offset="18.4%"  stop-color="green" />
      <stop offset="39%" stop-color="green" />
      <stop offset="39%"  stop-color="blue" />
      <stop offset="48%" stop-color="blue" />
      <stop offset="48%" stop-color="gray" />
      <stop offset="100%" stop-color="grey" />
    </linearGradient>

    <path
    id="c-dashed-line" class="path2"
       d="m 548.50746,29.104478 c 0,0 136.56717,279.850742 228.35821,293.283582 91.79105,13.43284 91.79105,13.43284 91.79105,13.43284 0,0 154.47758,22.38806 214.92538,134.32835 60.4478,111.9403 40.2985,203.73135 147.7612,295.52239 107.4627,91.79105 208.2089,-6.71642 380.597,114.17911"
       style="fill:none;" />

  </defs>
  <use class="c-dashed-line__path" xlink:href="#c-dashed-line"/>
    <!--overlay -->
    <use class="c-dashed-line__overlay" xlink:href="#c-dashed-line"/>

  <rect x="80%" y="0%" width="20%" height="20%" fill="url(#special-gradient)"/>
</svg>