css - Animation SVG wrong direction -


i trying animate word svg made. word write in wrong direction (start end of word , finish @ beginning). can control direction of animation?

@keyframes offset{    100%{      stroke-dashoffset:0;    }  }    .motepicerie{ stroke:#000; stroke-width:3px;  		stroke-dasharray:984;  		stroke-dashoffset:984;  		animation:offset 4s linear forwards;  }
<svg version="1.1" id="layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewbox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667" xml:space="preserve">    <g>      <path  class="motepicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527l93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262l30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 c31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"/>    </g>  </svg>

https://jsfiddle.net/piieell/jo1ern3r/

thank you!

just reverse stroke-dashoffset negative value.

of course, obvious solution re-write path in correct direction. pre-planning everything. :)

.motepicerie {   stroke: #000;   stroke-width: 3px;   stroke-dasharray: 984;   stroke-dashoffset: -984;   animation: offset 4s linear forwards; } 

@keyframes offset {    100% {      stroke-dashoffset: 0;    }  }  .motepicerie {    stroke: #000;    stroke-width: 3px;    stroke-dasharray: 984;    stroke-dashoffset: -984;    animation: offset 4s linear forwards;  }
<svg version="1.1" id="layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewbox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667"  xml:space="preserve">    <g>      <path class="motepicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527l93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262l30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 c31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"      />    </g>  </svg>


Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more