маскировать путь SVG другим путем - PullRequest
Новая
       23

маскировать путь SVG другим путем

0 голосов
/ 13 ноября 2018

У меня есть SVG-путь (сплошной), который я хочу замаскировать другим путем (пунктир).У меня есть этот CSS 

        .dashed{
          stroke-dasharray: 5;

        }
        .path {
          stroke-dasharray: 852;
          stroke-dashoffset: 852;
          animation: dash 4s 1s linear forwards;
        }
        @keyframes dash {
          to { 
            stroke-dashoffset: 0; 
          } 
        }

и SVG как этот 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
    <g transform="scale(1.7)">
        <path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
    </g>

    <g transform="scale(1.71)">
        <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
    </g>    
</svg>

Пути одинаковы.Причиной, по которой я не использую только пунктирную, является анимация (см. Часть CSS), где я хочу создать эффект, который будет рисовать пунктирную линию.

Использование маски (с пунктирной линией внутри) 

 mask-image: url(mask.svg);

у меня не сработало.Вы знаете путь?

1 Ответ

0 голосов
/ 13 ноября 2018

Вам не нужно использовать mask-image.Это для случаев, когда вы хотите замаскировать элемент HTML маской.

Вы должны просто использовать элемент SVG <mask>.И оживи путь в этом. 

.dashed {
  stroke-dasharray: 5;
}

.path {
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  animation: dash 4s 1s linear forwards;
}

@keyframes dash {
  to { 
    stroke-dashoffset: 0; 
  } 
} 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">
  <defs>
    <mask id="mymask">
      <path class="path" fill="none" stroke="#fff" stroke-width="2"
            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
    </mask>
  </defs>

  <g transform="scale(1.71)">
    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"
          mask="url(#mymask)"
          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>
  </g>    
</svg>
...