Tout d'abord, je sais que cette question est très similaire à cette question, mais j'ai essayé d'implémenter cette solution avec un SVG PATH et cela n'a pas fonctionné.

Je sais aussi qu'une autre solution serait de boucler le PATH et de définir le FILL du PATH comme mentionné ici et ailleurs sur le Web.

Cependant, j'ai animé le STROKE-DASHOFFSET du PATH afin que le trait du PATH, qui est simplement une ligne irrégulière, apparaisse comme s'il était dessiné sur la page; C'est l'effet que je souhaite obtenir sans utiliser de couleur comme STROKE mais plutôt une image. En d'autres termes, il apparaîtrait à l'utilisateur comme si l'image (et non une couleur unie) est dessinée sur la page sous la forme d'une ligne irrégulière.

Comme demandé, vous trouverez ci-dessous le HTML du PATH que j'utilise et son CSS correspondant, une image de ce PATH, ainsi que le CSS de l'animation elle-même:

        <div id="container">
           <svg>
              <path d="
                 M0,5
                 L184,5
                 C202,5 202,5 202,36
                 L202,86
                 L327,85
                 L421,166
                 L460,166
                 L499,132
                 L588,211
                 L617,211
                 L712,134
                 L748,165
                 L780,165
                 L830,111
                 L913,212
                 L938,212
                 L1028,140
                 L1078,184
                 L1107,184
                 L1152,140
                 L1263,249
                 L1263,248"
              />
           </svg>
        </div>

Image de PATH

    #container {
        width:1263px; height:255px;
        position:absolute;
    }

    #container svg {
        width:100%; height:100%;
        fill:none;
        stroke:#008066; stroke-width:8;
        stroke-dasharray:1628; stroke-dashoffset:1628.1;
        stroke-linecap:square;

        animation:polyline 3.15s linear 0.5s forwards;
    }

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

Est-ce possible?

Est-ce possible en utilisant l'élément CLIPPATH puis en l'animant d'une manière ou d'une autre?

TIA

Mettre à jour

Ci-dessous se trouve le code avec les éléments PATTERN et IMAGE, et le CSS correspondant, qui ne semble pas produire de trait.

    <defs>
       <pattern id="pattern" width="1600" height="800" patternUnits="userSpaceOnUse">
          <image xlink:href="http://lorempixel.com/1600/800/nature" width="1600" height="800" />
       </pattern>
    </defs>

    #container svg {
        stroke:url(#pattern);
    }
3
user2230470 30 déc. 2015 à 01:10

2 réponses

Meilleure réponse

C'est un bogue Chrome / Safari sur lequel vous comptez.

stroke:url(#pattern);

Est en fait un raccourci pour

stroke:url(<this file>#pattern);

Mais il n'y a pas de modèle dans le fichier css. Chrome se trompe, Firefox a raison. Si vous corrigez la référence, Firefox fonctionnera mais malheureusement Chrome ne le sera plus. La solution la plus compatible serait donc de déplacer votre CSS (au moins le bit qui fait référence au motif) dans le fichier SVG lui-même dans les balises <style>.

1
Robert Longson 30 déc. 2015 à 10:06

Cela fonctionne bien sur Firefox. Je ne sais pas quel est le problème que vous rencontrez.

#container svg {
  fill: none;
  stroke-width: 10px;
  stroke: url(#pattern);
  stroke-dasharray:1628;
  stroke-dashoffset:1628.1;
  animation:polyline 3.15s linear 0.5s forwards;
}

@keyframes polyline {
  to {
    stroke-dashoffset:0;
  }
}
<div id="container">
  <svg>
    <defs>
      <pattern id="pattern" width="1600" height="800" patternUnits="userSpaceOnUse">
        <image xlink:href="http://lorempixel.com/1600/800/nature" width="1600" height="800" />
      </pattern>
    </defs>

    <path d="M0,5
             L184,5
             C202,5 202,5 202,36
             L202,86
             L327,85
             L421,166
             L460,166
             L499,132
             L588,211
             L617,211
             L712,134
             L748,165
             L780,165
             L830,111
             L913,212
             L938,212
             L1028,140
             L1078,184
             L1107,184
             L1152,140
             L1263,249
             L1263,248"
          />
  </svg>
</div>
0
Paul LeBeau 30 déc. 2015 à 09:22