Made Taman
Reputation: 119
animate svg using fill
how to make animation using path SVG of illustrator. I got SVG code (path) from illustrator cs6, after I finished making the object there.
for animation, i'm using css3 (animation) without javascript. so, i put svg code into html file, and animation of object, its working, but my problem is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.map {
fill: none;
stroke: #FFF;
stroke-dasharray: 5000;
stroke-dashoffset: 5000;
}
.animate {
-webkit-animation: dash 100s linear alternate;
animation: dash 100s linear alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 5000; fill: #FFF !important;
}
to {
stroke-dashoffset: 0; fill: #FFF !important;
}
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 5000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body style="background: black;">
<svg id="ps4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" viewBox="0 0 600 318" enable-background="new 0 0 600 318" xml:space="preserve">
<path class="map animate" d="M5.831,7.433C9.023,6.9,13.355,6.444,18.599,6.444c6.537,0,11.325,1.521,14.365,4.256
c2.736,2.432,4.484,6.156,4.484,10.792c0,4.712-1.368,8.361-3.952,11.021C30,36.238,24.3,38.138,17.991,38.138
c-2.128,0-4.104-0.152-5.472-0.38v20.293H5.831V7.433z M12.519,32.362c1.064,0.304,3.268,0.456,5.472,0.456
c7.98,0,12.845-3.952,12.845-10.944c0-6.917-4.788-10.185-12.084-10.185c-2.964,0-5.092,0.228-6.232,0.456V32.362z"/>
<path class="map animate" d="M46.263,7.509c3.42-0.684,8.208-1.064,12.769-1.064c7.068,0,11.629,1.292,14.821,4.18c2.508,2.28,4.028,5.776,4.028,9.729
c0,6.765-4.256,11.249-9.652,13.073v0.152c3.952,1.444,6.308,5.168,7.524,10.413c1.672,7.22,2.888,12.084,3.952,14.061h-6.84
c-0.836-1.444-1.976-5.853-3.42-12.237c-1.52-6.992-4.256-9.729-10.26-9.957h-6.232v22.193h-6.688V7.509z M52.951,30.842h6.764
c7.068,0,11.553-3.876,11.553-9.729c0-6.688-4.788-9.5-11.781-9.577c-3.268,0-5.472,0.304-6.536,0.608V30.842z"/>
<path class="map animate" d="M93.838,6.825v51.227H87.15V6.825H93.838z"/>
<path class="map animate" d="M148.636,35.554c-0.456-7.068-0.912-15.733-0.836-22.042h-0.228c-1.748,5.929-4.028,12.845-6.536,19.685l-8.893,24.549
h-5.244l-8.133-24.397c-2.508-7.221-4.484-13.833-5.852-19.837h-0.228c-0.228,6.309-0.456,14.821-0.988,22.573l-1.368,21.965
h-6.309l3.572-51.227h8.437l8.74,24.853c2.128,6.156,3.8,12.237,5.092,17.557h0.228c1.292-5.168,3.116-11.173,5.472-17.633
l9.121-24.777h8.437l3.192,51.227h-6.537L148.636,35.554z"/>
<path class="map animate" d="M174.018,41.938l-5.244,16.113h-6.917l17.481-51.227h7.905l17.481,51.227h-7.068l-5.473-16.113H174.018z M190.814,36.77
l-5.016-14.745c-1.14-3.344-1.9-6.384-2.66-9.349h-0.228c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H190.814z"/>
<path class="map animate" d="M228.357,58.051V6.825h7.373l16.341,25.841c3.724,6.08,6.764,11.477,9.196,16.721l0.152-0.076
c-0.608-6.841-0.76-13.073-0.76-20.978V6.825h6.232v51.227h-6.688l-16.265-25.993c-3.572-5.701-6.993-11.553-9.577-17.101
l-0.228,0.076c0.38,6.46,0.532,12.617,0.532,21.129v21.889H228.357z"/>
<path class="map animate" d="M304.89,34.034h-19.837v18.545h22.193v5.472h-28.882V6.825h27.741v5.472h-21.053v16.265h19.837V34.034z"/>
<path class="map animate" d="M354.746,55.771c-2.965,1.064-8.816,2.813-15.733,2.813c-7.752,0-14.137-1.976-19.152-6.765
c-4.408-4.256-7.145-11.097-7.145-19.077c0.076-15.201,10.564-26.449,27.741-26.449c5.929,0,10.641,1.368,12.769,2.356
l-1.596,5.396c-2.736-1.216-6.156-2.204-11.325-2.204c-12.464,0-20.597,7.752-20.597,20.597c0,12.997,7.752,20.673,19.761,20.673
c4.333,0,7.297-0.608,8.816-1.368V36.466h-10.412v-5.32h16.873V55.771z"/>
<path class="map animate" d="M373.136,41.938l-5.244,16.113h-6.916l17.48-51.227h7.904l17.481,51.227h-7.068l-5.473-16.113H373.136z M389.933,36.77
l-5.016-14.745c-1.141-3.344-1.9-6.384-2.66-9.349h-0.229c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H389.933z"/>
<path class="map animate" d="M411.288,7.509c3.42-0.684,8.209-1.064,12.769-1.064c7.068,0,11.629,1.292,14.821,4.18c2.508,2.28,4.028,5.776,4.028,9.729
c0,6.765-4.257,11.249-9.653,13.073v0.152c3.952,1.444,6.309,5.168,7.524,10.413c1.673,7.22,2.889,12.084,3.952,14.061h-6.84
c-0.836-1.444-1.977-5.853-3.42-12.237c-1.521-6.992-4.257-9.729-10.261-9.957h-6.232v22.193h-6.688V7.509z M417.977,30.842h6.765
c7.068,0,11.553-3.876,11.553-9.729c0-6.688-4.789-9.5-11.781-9.577c-3.268,0-5.472,0.304-6.536,0.608V30.842z"/>
<path class="map animate" d="M460.915,41.938l-5.244,16.113h-6.916l17.48-51.227h7.904l17.481,51.227h-7.068l-5.473-16.113H460.915z M477.712,36.77
l-5.016-14.745c-1.141-3.344-1.9-6.384-2.66-9.349h-0.229c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H477.712z"/>
</svg>
</body>
</html>animation just drawing using stroke, not using fill..
can you help me, how to make animate drawing svg with fill, not using stoke (without stroke)
Upvotes: 4
Views: 3008
Answers (1)
Paul LeBeau
Reputation: 101800
As Robert said, you will need to explain what you mean by "animating the fill". There are many ways you could do it.
But perhaps something like the following is what you were after?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.map {
fill: none;
stroke: #FFF;
stroke-dasharray: 500;
stroke-dashoffset: 500;
}
.animate {
-webkit-animation: dash 5s linear alternate;
animation: dash 5s linear alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 500; fill: #FFF !important;
fill: black;
}
to {
stroke-dashoffset: 0; fill: #FFF !important;
fill: white;
}
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 500;
fill: black;
}
to {
stroke-dashoffset: 0;
fill: white;
}
}
</style>
</head>
<body style="background: black;">
<svg id="ps4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" viewBox="0 0 600 318" enable-background="new 0 0 600 318" xml:space="preserve">
<path class="map animate" d="M5.831,7.433C9.023,6.9,13.355,6.444,18.599,6.444c6.537,0,11.325,1.521,14.365,4.256
c2.736,2.432,4.484,6.156,4.484,10.792c0,4.712-1.368,8.361-3.952,11.021C30,36.238,24.3,38.138,17.991,38.138
c-2.128,0-4.104-0.152-5.472-0.38v20.293H5.831V7.433z M12.519,32.362c1.064,0.304,3.268,0.456,5.472,0.456
c7.98,0,12.845-3.952,12.845-10.944c0-6.917-4.788-10.185-12.084-10.185c-2.964,0-5.092,0.228-6.232,0.456V32.362z"/>
<path class="map animate" d="M46.263,7.509c3.42-0.684,8.208-1.064,12.769-1.064c7.068,0,11.629,1.292,14.821,4.18c2.508,2.28,4.028,5.776,4.028,9.729
c0,6.765-4.256,11.249-9.652,13.073v0.152c3.952,1.444,6.308,5.168,7.524,10.413c1.672,7.22,2.888,12.084,3.952,14.061h-6.84
c-0.836-1.444-1.976-5.853-3.42-12.237c-1.52-6.992-4.256-9.729-10.26-9.957h-6.232v22.193h-6.688V7.509z M52.951,30.842h6.764
c7.068,0,11.553-3.876,11.553-9.729c0-6.688-4.788-9.5-11.781-9.577c-3.268,0-5.472,0.304-6.536,0.608V30.842z"/>
<path class="map animate" d="M93.838,6.825v51.227H87.15V6.825H93.838z"/>
<path class="map animate" d="M148.636,35.554c-0.456-7.068-0.912-15.733-0.836-22.042h-0.228c-1.748,5.929-4.028,12.845-6.536,19.685l-8.893,24.549
h-5.244l-8.133-24.397c-2.508-7.221-4.484-13.833-5.852-19.837h-0.228c-0.228,6.309-0.456,14.821-0.988,22.573l-1.368,21.965
h-6.309l3.572-51.227h8.437l8.74,24.853c2.128,6.156,3.8,12.237,5.092,17.557h0.228c1.292-5.168,3.116-11.173,5.472-17.633
l9.121-24.777h8.437l3.192,51.227h-6.537L148.636,35.554z"/>
<path class="map animate" d="M174.018,41.938l-5.244,16.113h-6.917l17.481-51.227h7.905l17.481,51.227h-7.068l-5.473-16.113H174.018z M190.814,36.77
l-5.016-14.745c-1.14-3.344-1.9-6.384-2.66-9.349h-0.228c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H190.814z"/>
<path class="map animate" d="M228.357,58.051V6.825h7.373l16.341,25.841c3.724,6.08,6.764,11.477,9.196,16.721l0.152-0.076
c-0.608-6.841-0.76-13.073-0.76-20.978V6.825h6.232v51.227h-6.688l-16.265-25.993c-3.572-5.701-6.993-11.553-9.577-17.101
l-0.228,0.076c0.38,6.46,0.532,12.617,0.532,21.129v21.889H228.357z"/>
<path class="map animate" d="M304.89,34.034h-19.837v18.545h22.193v5.472h-28.882V6.825h27.741v5.472h-21.053v16.265h19.837V34.034z"/>
<path class="map animate" d="M354.746,55.771c-2.965,1.064-8.816,2.813-15.733,2.813c-7.752,0-14.137-1.976-19.152-6.765
c-4.408-4.256-7.145-11.097-7.145-19.077c0.076-15.201,10.564-26.449,27.741-26.449c5.929,0,10.641,1.368,12.769,2.356
l-1.596,5.396c-2.736-1.216-6.156-2.204-11.325-2.204c-12.464,0-20.597,7.752-20.597,20.597c0,12.997,7.752,20.673,19.761,20.673
c4.333,0,7.297-0.608,8.816-1.368V36.466h-10.412v-5.32h16.873V55.771z"/>
<path class="map animate" d="M373.136,41.938l-5.244,16.113h-6.916l17.48-51.227h7.904l17.481,51.227h-7.068l-5.473-16.113H373.136z M389.933,36.77
l-5.016-14.745c-1.141-3.344-1.9-6.384-2.66-9.349h-0.229c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H389.933z"/>
<path class="map animate" d="M411.288,7.509c3.42-0.684,8.209-1.064,12.769-1.064c7.068,0,11.629,1.292,14.821,4.18c2.508,2.28,4.028,5.776,4.028,9.729
c0,6.765-4.257,11.249-9.653,13.073v0.152c3.952,1.444,6.309,5.168,7.524,10.413c1.673,7.22,2.889,12.084,3.952,14.061h-6.84
c-0.836-1.444-1.977-5.853-3.42-12.237c-1.521-6.992-4.257-9.729-10.261-9.957h-6.232v22.193h-6.688V7.509z M417.977,30.842h6.765
c7.068,0,11.553-3.876,11.553-9.729c0-6.688-4.789-9.5-11.781-9.577c-3.268,0-5.472,0.304-6.536,0.608V30.842z"/>
<path class="map animate" d="M460.915,41.938l-5.244,16.113h-6.916l17.48-51.227h7.904l17.481,51.227h-7.068l-5.473-16.113H460.915z M477.712,36.77
l-5.016-14.745c-1.141-3.344-1.9-6.384-2.66-9.349h-0.229c-0.684,3.04-1.52,6.156-2.508,9.272l-5.017,14.821H477.712z"/>
</svg>
</body>
</html>Upvotes: 3
Related Questions
- Svg fill animation for the given path
- Animate SVG fill shape by following the form
- How to animate a SVG polygon to fill?
- Svg path fill with animation
- Animate SVG fill from left to right
- How to draw a fill svg?
- Animate fill of path element in SVG using css
- Using CSS to animate the fill of SVG path elements
- SVG Animation with CSS
- Animate svg path fill using css