Добавление разных цветов к штрихам штрихов SVG - PullRequest
Новая
       61

Добавление разных цветов к штрихам штрихов SVG

0 голосов
/ 24 октября 2019

Я новичок в 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

Я намерен использовать разные цвета для каждой черты. любая помощь приветствуется. заранее спасибо

1 Ответ

1 голос
/ 25 октября 2019

Вы можете построить линейный градиент для многих линий, которые могут давать разные цветовые штрихи, но это довольно сложно, потому что вы должны расположить его так, чтобы все переходы градиента происходили в промежутках между штриховыми штрихами. Если разрывы тире слишком узкие или линия слишком волнистая, то для того, чтобы это сработало, нужно пройти через серьезные искажения. Проще просто использовать разные перекрывающиеся пути с настроенными массивами штрихов.

Но это часто возможно - вот пример, который работает с вашей конкретной линией. 

 .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"/>
</svg>
...