使用填充为 svg 设置动画
Posted
技术标签:
【中文标题】使用填充为 svg 设置动画【英文标题】：animate svg using fill 【发布时间】：2015-04-12 01:19:40 【问题描述】：如何使用 ilustrator 的路径 svg 制作动画。在完成制作对象后，我从 ilustrator cs6 获得了 svg 代码（路径）。
对于动画，我使用的是没有 javascript 的 css3（动画）。所以，我将 svg 代码放入 html 文件和对象的动画，它的工作，但我的问题是：
<!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" 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>动画只是使用描边绘制，而不是使用填充..
你能帮我吗，如何使用填充制作动画绘图 svg，而不是使用 stoke（无笔触）
【问题讨论】：
填充动画到底是什么样的？ Stroke 有一个起始位置并绘制一个圆形，fill 只是填充它，因此没有起点/终点。 看看这个答案，可能有兴趣***.com/a/32858946/1926369 @Royson，我很难理解为什么有人会在一个不清楚的问题上悬赏。目前还不清楚结果应该是什么，以及为什么在笔画上进行动画填充会有好处。 @AndreiGheorghiu 我正在尝试做与上述问题类似的事情。我发现的唯一解决方案是使用 Inkscape 并从中创建 SVG 路径，然后使用该路径。我想要可以使用各种字体的东西。 【参考方案1】：正如罗伯特所说，您需要解释“动画填充”的含义。有很多方法可以做到。
但也许像下面这样的东西是你所追求的？
<!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" 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>【讨论】：
感谢您的参与者 Mr.Paul.. 但是，在绘图时，我想使用填充，而不是描边和...所以，您能帮我制作吗..？ 您需要说明您希望填充动画的方式。它应该是什么样子？ @PaulLeBeau 我相信我正在寻找类似于 Made Taman 的东西。我希望fill 属性以 stroes 在动画中的方式绘制自己。笔划偏移动画使它看起来像其他人正在绘制线条。使用填充，动画仅在不透明度上。是否可以一点一点地“淡入”填充？
也许这会有所帮助：***.com/questions/37779906/…以上是关于使用填充为 svg 设置动画的主要内容，如果未能解决你的问题，请参考以下文章