Как сделать анимацию SVG-текста?

-3

Я создал SVG текста я хочу animate.How сделать анимировать это я пытаюсь использовать walkway.js, но не good.PLease помощьКак сделать анимацию SVG-текста?

Вот файл Ai и https://drive.google.com/folderview?id=0B6mqsb8ykvlRNU9tNzZycVBFNTA&usp=sharing SVG

источник

2015-11-22 rasik raj

Мой совет, чтобы взглянуть на это [статья] (Http: // 4waisenkinder .de/blog/2014/05/11/d3-dot-js-tween-in-detail /), где у вас много SVG манипуляции с использованием D3.js – sfiore

Это article поможет вам сделать простой анимации и SVG и CSS Only.For больше advanced animations refer here для таких как пути анимации

источник

2015-11-23 07:01:22 asp

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="350px" height="150px" viewBox="0 0 350 150" enable-background="new 0 0 350 150" xml:space="preserve"> 
<g xmlns="http://www.w3.org/2000/svg" fill="#000"> 
    <path d="M34.422,98.598V93.38c4.366,3.018,8.79,4.525,13.271,4.525c4.764,0,8.379-1.069,10.846-3.209 c2.467-2.14,3.701-5.133,3.701-8.98c0-3.386-0.829-6.087-2.488-8.104c-1.659-2.016-5.253-4.763-10.783-8.241 c-6.182-3.909-10.095-7.18-11.74-9.812c-1.645-2.632-2.467-5.671-2.467-9.119c0-4.679,1.673-8.649,5.019-11.913 c3.346-3.262,7.812-4.894,13.398-4.894c3.629,0,7.259,0.662,10.889,1.985v4.802c-3.573-1.754-7.387-2.632-11.442-2.632 c-4.141,0-7.422,1.139-9.847,3.417c-2.424,2.278-3.637,5.171-3.637,8.68c0,3.386,0.83,6.08,2.488,8.08 c1.659,2.001,5.239,4.725,10.74,8.172c5.7,3.509,9.492,6.626,11.378,9.35c1.885,2.725,2.829,5.856,2.829,9.396 c0,5.078-1.624,9.219-4.871,12.42c-3.247,3.201-7.833,4.802-13.76,4.802c-2.099,0-4.516-0.354-7.252-1.062 C37.959,100.337,35.868,99.521,34.422,98.598z"/> 
    <path d="M96.014,100.306c-2.042,1.046-3.956,1.57-5.742,1.57c-6.438,0-9.656-4.187-9.656-12.56V57.551H72.79v-3.878 h7.826V41.391c0.624-0.246,1.276-0.492,1.957-0.739c0.681-0.215,1.333-0.446,1.957-0.692v13.713h11.484v3.878H84.529v31.212 c0,3.263,0.475,5.626,1.425,7.088c0.95,1.462,2.559,2.192,4.828,2.192c1.616,0,3.36-0.569,5.232-1.708V100.306z"/> 
    <path d="M130.68,100.952v-9.465h-0.17c-1.39,3.231-3.41,5.811-6.062,7.733c-2.652,1.924-5.593,2.886-8.826,2.886 c-4.14,0-7.416-1.262-9.826-3.786c-2.41-2.523-3.615-5.709-3.615-9.558c0-8.249,5.033-13.235,15.1-14.96l13.398-2.17 c0-10.158-3.516-15.236-10.549-15.236c-4.792,0-9.458,2.094-13.994,6.279v-5.125c1.617-1.385,3.807-2.57,6.572-3.555 c2.765-0.985,5.366-1.478,7.805-1.478c4.48,0,7.947,1.508,10.4,4.525c2.453,3.017,3.68,7.403,3.68,13.159v30.75H130.68z M118.685,77.404c-4.566,0.709-7.77,1.855-9.613,3.44c-1.844,1.585-2.765,4.163-2.765,7.733c0,2.802,0.857,5.11,2.573,6.926 c1.715,1.816,4.105,2.724,7.167,2.724c4.196,0,7.684-1.685,10.463-5.056c2.779-3.37,4.168-7.718,4.168-13.043v-4.617 L118.685,77.404z"/> 
    <path d="M168.239,58.105c-1.305-1.016-2.836-1.524-4.594-1.524c-3.432,0-6.31,1.924-8.635,5.771 c-2.326,3.848-3.488,9.312-3.488,16.391v22.209h-3.829v-47.28h3.829v10.481h0.17c0.992-3.602,2.566-6.402,4.722-8.403 c2.154-2,4.65-3.001,7.486-3.001c1.617,0,3.063,0.277,4.339,0.831V58.105z"/> 
    <path d="M197.504,100.306c-2.042,1.046-3.956,1.57-5.743,1.57c-6.438,0-9.655-4.187-9.655-12.56V57.551h-7.826 v-3.878h7.826V41.391c0.624-0.246,1.276-0.492,1.957-0.739c0.681-0.215,1.332-0.446,1.956-0.692v13.713h11.485v3.878h-11.485 v31.212c0,3.263,0.475,5.626,1.425,7.088s2.56,2.192,4.828,2.192c1.616,0,3.36-0.569,5.232-1.708V100.306z"/> 
    <path d="M206.988,100.952v-66.21h28.499v4.202h-24.288v26.549h22.544v4.155h-22.544v27.149h25.691v4.155H206.988z"/> 
    <path d="M280.617,100.952v-8.588h-0.171c-1.418,2.986-3.516,5.355-6.295,7.11s-5.912,2.632-9.4,2.632 c-5.359,0-9.733-2.124-13.122-6.372c-3.389-4.247-5.083-10.111-5.083-17.591c0-7.634,1.851-13.813,5.551-18.538 c3.701-4.725,8.5-7.087,14.398-7.087c6.521,0,11.172,2.909,13.951,8.727h0.171V30.956h3.913v69.997H280.617z M280.617,72.188 c0-4.401-1.284-8.134-3.85-11.197c-2.567-3.063-6.019-4.594-10.357-4.594c-4.566,0-8.337,1.901-11.314,5.702 c-2.978,3.802-4.467,9.026-4.467,15.675c0,6.526,1.34,11.566,4.021,15.122c2.68,3.555,6.131,5.332,10.356,5.332 c4.963,0,8.806-1.669,11.527-5.009c2.723-3.34,4.084-7.411,4.084-12.213V72.188z"/> 
    <path d="M327.235,100.952v-8.588h-0.17c-3.034,6.495-7.714,9.742-14.037,9.742 c-10.293,0-15.439-7.033-15.439-21.101V53.672h3.955v26.272c0,6.402,0.972,11.051,2.914,13.943c1.942,2.894,4.998,4.34,9.166,4.34 c4.055,0,7.338-1.615,9.848-4.848c2.509-3.231,3.764-7.541,3.764-12.928v-26.78h3.913v47.28H327.235z"/> 
    <animate from="#000" to="#fff" begin="0ms" dur="1000ms" repeatCount="none" fill="freeze" attributeName="fill"/> 
</g> 
</svg>

источник

2015-11-23 07:49:35

дайте мне знать, если вы хотите получить другую помощь для svg –

Как сделать анимацию SVG-текста?

ответ

Смежные вопросы