添加clipPath后SVG不可见

时间:2019-01-17 21:27:10

标签: css svg clip-path

我正在尝试剪切svg并将其完全隐藏。我正在关注本教程:https://medium.com/@anatacreative/handwriting-animation-with-svg-638931410cfa

    <svg width="28px" height="17px" viewBox="0 0 28 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
        <defs>
                <clipPath id="clip-e">
                <path d="M560.332353,492.339722 C560.155756,492.57917 559.866308,492.796593 559.464,492.992 C558.755996,493.328002 557.838006,493.594999 556.71,493.793 C555.581994,493.991001 554.472005,494.09 553.38,494.09 C551.867992,494.09 550.602005,493.919002 549.582,493.577 C548.561995,493.234998 547.803002,492.764003 547.305,492.164 C546.806998,491.563997 546.558,490.886004 546.558,490.13 C546.558,489.097995 546.890997,488.219004 547.557,487.493 C548.223003,486.766996 549.203994,486.242002 550.5,485.918 C549.791996,485.713999 549.249002,485.354003 548.871,484.838 C548.492998,484.321997 548.304,483.746003 548.304,483.11 C548.304,482.245996 548.576997,481.481003 549.123,480.815 C549.669003,480.148997 550.403995,479.636002 551.328,479.276 C552.252005,478.915998 553.265994,478.736 554.37,478.736 C555.858007,478.736 556.973996,479.056997 557.718,479.699 C558.462004,480.341003 558.834,481.171995 558.834,482.192 C558.834,482.900004 558.705001,483.472998 558.447,483.911 C558.188999,484.349002 557.820002,484.568 557.34,484.568 C557.003998,484.568 556.740001,484.493001 556.548,484.343 C556.355999,484.192999 556.26,483.968002 556.26,483.668 C556.26,483.463999 556.29,483.242001 556.35,483.002 C556.41,482.605998 556.44,482.336001 556.44,482.192 C556.44,481.759998 556.278002,481.409001 555.954,481.139 C555.629998,480.868999 555.090004,480.734 554.334,480.734 C553.313995,480.734 552.498003,480.949998 551.886,481.382 C551.273997,481.814002 550.968,482.395996 550.968,483.128 C550.968,483.692003 551.198998,484.156998 551.661,484.523 C552.123002,484.889002 552.875995,485.09 553.92,485.126 C554.184001,485.138 554.369999,485.197999 554.478,485.306 C554.586001,485.414001 554.64,485.593999 554.64,485.846 C554.64,486.638004 554.280004,487.04 553.56,487.052 C552.563995,487.076 551.739003,487.213999 551.085,487.466 C550.430997,487.718001 549.957001,488.038998 549.663,488.429 C549.368999,488.819002 549.222,489.235998 549.222,489.68 C549.222,490.424004 549.569997,490.984998 550.266,491.363 C550.962003,491.741002 552.065992,491.93 553.578,491.93 C554.574005,491.93 555.626994,491.813001 556.737,491.579 C557.847006,491.344999 558.797996,491.060002 559.59,490.724 C559.634169,490.706332 559.676532,490.690832 559.717088,490.6775 C559.381695,489.406496 559.214,487.856004 559.214,486.026 C559.214,483.913989 559.363998,482.018008 559.664,480.338 C559.772001,479.713997 559.924999,479.291001 560.123,479.069 C560.321001,478.846999 560.659998,478.736 561.14,478.736 C561.932004,478.736 562.328,479.077997 562.328,479.762 C562.328,479.834 562.316,479.965999 562.292,480.158 C561.931998,482.318011 561.752,484.273991 561.752,486.026 C561.752,487.862009 561.904998,489.256995 562.211,490.211 C562.517002,491.165005 562.975997,491.642 563.588,491.642 C564.212003,491.642 564.889996,491.210004 565.622,490.346 C566.354004,489.481996 567.025997,488.396007 567.638,487.088 C566.905996,486.631998 566.354002,486.041004 565.982,485.315 C565.609998,484.588996 565.424,483.752005 565.424,482.804 C565.424,481.855995 565.570999,481.055003 565.865,480.401 C566.159001,479.746997 566.560997,479.258002 567.071,478.934 C567.581003,478.609998 568.147997,478.448 568.772,478.448 C569.540004,478.448 570.148998,478.723997 570.599,479.276 C571.049002,479.828003 571.274,480.583995 571.274,481.544 C571.274,482.924007 570.974003,484.429992 570.374,486.062 C571.010003,486.170001 571.735996,486.224 572.552,486.224 C572.828001,486.224 573.028999,486.283999 573.155,486.404 C573.281001,486.524001 573.344,486.679999 573.344,486.872 C573.344,487.184002 573.251001,487.459999 573.065,487.7 C572.878999,487.940001 572.588002,488.066 572.192,488.078 C571.231995,488.102 570.380004,488.030001 569.636,487.862 C568.783996,489.650009 567.755006,491.134994 566.549,492.317 C565.342994,493.499006 564.134006,494.09 562.922,494.09 C561.803228,494.09 560.940019,493.506579 560.332353,492.339722 Z M568.376,485.288 C568.844002,483.943993 569.078,482.834004 569.078,481.958 C569.078,481.453997 569.012001,481.085001 568.88,480.851 C568.747999,480.616999 568.568001,480.5 568.34,480.5 C568.015998,480.5 567.752001,480.688998 567.548,481.067 C567.343999,481.445002 567.242,481.981997 567.242,482.678 C567.242,483.854006 567.619996,484.723997 568.376,485.288 Z"/> </clipPath>   
        </defs>
      
             
        <g clip-path="url(#clip-e)" stroke-width="40">
                <path class="anata-path-e" fill="none" stroke="#fff" stroke-miterlimit="10"  d="M557.284424,484.927246 C557.221761,483.370117 558.177625,481.378181 557.096436,480.255859 C556.032053,479.150984 550.190781,479.537731 550.226318,482.464111 C550.244786,483.984833 553.032287,484.868341 552.637939,486.337158 C552.145476,488.171427 540.894669,492.678845 553.69458,492.48999 C556.289084,492.45171 558.808512,491.607178 561.365479,491.165771" /> 
        </g>
    </svg>

0 个答案:

没有答案