Ich kann den Clip-Pfad nicht für mein Logo verwenden

Ich möchte mein Firmenlogo so animieren, dass es so aussieht, wie es geschrieben wird. Ich habe das Original-SVG mit den Logo-Pfaden und erstellte separate Pfade, die als Maske dienen, die animiert werden.Ich kann den Clip-Pfad nicht für mein Logo verwenden

Aus irgendeinem Grund bedeckt die Maske nicht das ursprüngliche Logo, während wenn Sie den Maskenpfad zeigen, sollte es das Logo abdecken.

Kann mir jemand helfen?

Mein Code so weit auf CodePen hier: http://codepen.io/MRSYDSTER/pen/XpWwdB

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Grip Dashing</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 

    <style> 
    </style> 
</head> 


<body> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> 
        <path id="r" clip-path="url(#myClip)" fill="#44A647" d="M7.066,8.727L7.001,8.29H6.476v2.617H7.13V9.301c0.251-0.308,0.397-0.453,0.564-0.453 
         c0.076,0,0.22,0.02,0.276,0.04L8.045,8.27C7.955,8.244,7.869,8.232,7.743,8.232C7.474,8.232,7.313,8.385,7.066,8.727z"/> 
        <polygon id="i" clip-path="url(#myClip)" fill="#44A647" points="8.539,8.794 8.941,8.794 8.941,10.907 9.596,10.907 9.596,8.29 8.539,8.29  "/> 
        <path id="gp" clip-path="url(#myClip)" fill="#44A647" d="M11.56,5.534c-0.37,0-0.748,0.061-1.13,0.181c-0.384-1.318-1.596-2.245-2.996-2.245 
         c-1.403,0-2.629,0.94-3.004,2.271C4.34,5.735,4.251,5.731,4.161,5.731c-1.896,0-3.438,1.542-3.438,3.438 
         c0,0.865,0.322,1.692,0.909,2.329c0.448,0.484,0.941,0.808,1.531,0.966c0.093,0.025,0.337,0.078,0.579,0.113 
         c0.221,0.032,0.439,0.046,0.525,0.052c0.094,0.005,0.185,0.008,0.269,0.008c0.89,0,1.337-0.354,1.337-1.181V8.418 
         C5.42,8.292,5.107,8.246,4.786,8.246c-0.965,0-1.415,0.611-1.415,1.42c0,0.691,0.327,1.252,1.073,1.252 
         c0.302,0,0.522-0.106,0.774-0.318v0.947c0,0.45-0.213,0.576-0.707,0.576c-0.253,0-0.531-0.015-0.764-0.044 
         c-1.194-0.121-2.472-1.426-2.472-2.908c0-1.591,1.293-2.885,2.885-2.885c0.571,0,1.125,0.167,1.598,0.483 
         c0.126,0.085,0.298,0.051,0.383-0.076c0.084-0.128,0.051-0.299-0.077-0.385c-0.333-0.222-0.7-0.382-1.084-0.475 
         c0.327-1.062,1.319-1.807,2.452-1.807c1.169,0,2.18,0.786,2.478,1.896C9.46,6.162,9.149,6.55,8.996,6.933 
         c-0.062,0.153-0.13,0.525-0.133,0.568C8.862,7.512,8.862,7.523,8.862,7.534c0,0.233,0.167,0.389,0.399,0.389 
         c0.233,0,0.398-0.156,0.398-0.389c0-0.148-0.067-0.264-0.174-0.329c0.109-0.331,0.414-0.701,0.847-0.871 
         c0.002,0,0.003-0.001,0.004-0.002c0.418-0.163,0.829-0.246,1.224-0.246c1.744,0,3.164,1.419,3.164,3.164 
         c0,1.605-1.009,2.95-2.6,3.136c-0.232,0.029-0.507,0.046-0.759,0.046c-0.496,0-0.711-0.126-0.711-0.577V11.57v-0.637 
         c0.151,0.03,0.333,0.056,0.509,0.056c0.919,0,1.344-0.648,1.344-1.455c0-0.703-0.325-1.263-1.058-1.263 
         c-0.383,0-0.64,0.152-0.882,0.409l-0.051-0.34H9.999v3.23v0.196c0,0.828,0.45,1.181,1.338,1.181c0.248,0,0.556-0.025,0.809-0.076 
         c1.87-0.219,3.131-1.734,3.131-3.62C15.277,7.202,13.609,5.534,11.56,5.534z M4.582,10.393c-0.404,0-0.524-0.353-0.524-0.793 
         c0-0.529,0.24-0.847,0.68-0.847c0.181,0,0.33,0.04,0.481,0.1v1.197C5.017,10.276,4.82,10.393,4.582,10.393z M10.653,9.18 
         c0.25-0.262,0.423-0.383,0.655-0.383c0.379,0,0.505,0.353,0.505,0.813c0,0.555-0.222,0.864-0.661,0.864 
         c-0.207,0-0.348-0.051-0.499-0.111V9.18z"/> 
    <defs> 
     <clipPath id="myClip"> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8 
       c0,0.8-0.6,0.9-1.6,1"/> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2 
       c2.4,0.1,3.2,1.6,3.5,3.3c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1-0.1-2.7"/> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1 
       s-0.1,1.3,0,2.4"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4 
       c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0,2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8 
       c0.4-1.5,2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7"/> 
     </clipPath> 
    </defs> 
    </svg> 

<script> 
var paths = $(‘path:not(defs path)’); 

paths.each(function(i, e) { 
    e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength(); 
}); 

var tl = new TimelineMax(); 

tl.add([ 
    TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}), 
    TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}), 
]); 

</script> 

</body> 
</html>

Quelle

2017-01-04 Sydney Smit

ich den Clip-Pfad von Ihrem SVG extrahiert und damit endete:

<svg viewBox="0 0 16 16" width="200" height="200"> 
 
    <g fill="#000" fill-opacity="0.2" stroke="#000" stroke-width="0.05"> 
 
    <path d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8c0,0.8-0.6,0.9-1.6,1" /> 
 
    <path d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2c2.4,0.1,3.2,1.6,3.5,3.3 
 
\t  c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1 
 
\t  -0.1-2.7" /> 
 
    <path d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1s-0.1,1.3,0,2.4" /> 
 
    <path d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7" /> 
 
    <path d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8" /> 
 
    <path d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1" /> 
 
    <path d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4 
 
\t  c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0, 
 
\t  2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8c0.4-1.5, 
 
\t  2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7" /> 
 
    </g> 
 
</svg>

Es sieht wie Sie erwartet haben, dass die Strichteile dieses Beschneidungspfads in dem maskierten Bereich enthalten sind. Ich befürchte, dass Clipping-Pfade nicht funktionieren. As per the SVG specification,

Die rohe Geometrie jeden Kindelement ausschließlich Eigenschaften wie ‚füllen‘ Rendering ‚Hub‘, ‚stroke-width‘ in einem ‚clipPath‘ definiert das Konzept eine 1-Bit-Maske (mit mögliche Ausnahme von Anti-Aliasing entlang der Kante der Geometrie), die die Silhouette der Grafik darstellt, die diesem Element zugeordnet ist. Alles außerhalb des Umrisses des Objekts wird ausgeblendet.

Grundsätzlich sind die stroke-width Attribute in Ihrem Beschneidungspfad haben überhaupt keine Wirkung. Sie müssen sie in gefüllte Regionen erweitern, wenn Sie möchten, dass sie etwas Nützliches tun.

Alternativ können Sie das Logo in eine Reihe von strichenen Pfaden ohne Füllungen konvertieren. Dies wird sein Aussehen leicht verändern, aber bringt Sie näher an den Effekt, den Sie erreichen wollten.

Quelle

2017-01-04 15:29:51

Oder verwenden Sie eine Maske anstelle eines ClipPath. In einer Maske tragen die Strichfarbe und -größe * dazu bei. –

Ich kann den Clip-Pfad nicht für mein Logo verwenden

Antwort

Verwandte Themen