关键词：
【中文标题】使用填充为 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 动画
...填充动画应该是另一种颜色，或者可以是相同的。我尝试使用动画标签，但它无效并且像任何东西一样填充。我的SVG路径如下所示。这是我的Svg代码，需要将此路径填充为dashoffset。<svgviewB 查看详情
如何为 SVG 多边形设置动画以进行填充？
】如何为SVG多边形设置动画以进行填充？【英文标题】：HowtoanimateaSVGpolygontofill?【发布时间】：2019-08-3118:04:39【问题描述】：我有一个SVG字母(A)，它由两个多边形和一个矩形组成。我想以第一个多边形变为可见然后第二个多边形... 查看详情
给定路径的 Svg 填充动画
】给定路径的Svg填充动画【英文标题】：Svgfillanimationforthegivenpath【发布时间】：2017-08-1514:52:26【问题描述】：我正在尝试从左到右为箭头设置动画。我的箭头路径的代码如下：<svgid="svg_circle"viewBox=\'00450400\'><gtransform="transl... 查看详情
使用 css 动画 svg 路径填充
】使用css动画svg路径填充【英文标题】：Animatesvgpathfillusingcss【发布时间】：2013-01-2306:22:40【问题描述】：可以使用css更改svg填充。但我没有设法创建动画。这是我的svg对象：<svgversion="1.1"id="tick"xmlns="http://www.w3.org/2000/svg"xmlns:x... 查看详情
如何使用 SVG 为网页上的手写文本设置动画？
】如何使用SVG为网页上的手写文本设置动画？【英文标题】：HowtoanimatehandwritingtextonthewebpageusingSVG?【发布时间】：2016-10-1306:58:48【问题描述】：我正在尝试为我创建并保存为SVG的文本设置动画。到目前为止，我只能为笔画设置动... 查看详情
使用 animate 标签为转换（旋转）的 SVG 组设置动画
】使用animate标签为转换（旋转）的SVG组设置动画【英文标题】：Animateatransformed(rotated)SVGgroupwithanimatetag【发布时间】：2021-06-0711:29:34【问题描述】：我想要为已转换（旋转）的SVG组制作动画。为此，我插入了动画标签。在我的示... 查看详情
带有变换的css关键帧动画不适用于SVG
...SVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充属性在同一个动画中起作用。所以动画被执行了。动画之外的变换工作，所以我不知道为什... 查看详情
使用 Canvas 为填充圆设置动画
】使用Canvas为填充圆设置动画【英文标题】：AnimateaFillCircleusingCanvas【发布时间】：2013-05-2713:16:17【问题描述】：基本上我希望能够使用画布填充一个圆圈，但它会以一定的百分比进行动画处理。即只有圆圈填满了80%的路径。我... 查看详情
关键帧动画问题
...，现在图标通过勾勒出每个单词的字母进行动画处理，并使用透明填充（这很棒）-但最终填充需要与各自的svg一致，这是我遇到减速带的地方。我为每个svg指定了关键帧，但两个svg都以相同的颜色填充完成-这不 查看详情
在链接悬停时为 SVG 设置动画
...然后当单击菜单项时，拱门应保留为页面标记。我尝试过使用背景图像，并为位置设置动画，或者为每个链接使用伪状态，但问题总是没有落在菜单项的中心，并且出现边界线，因为它需要是一个带有切口的拱门有道理吗？CODEPE... 查看详情
逐渐为 SVG 设置动画
...该div内时，我如何触发它，这两个imgs将例如移动。也许使用Javascript，但我似乎可以在悬停时瞄准img。只有鼠标悬停？这使得状态永远改变了。我需要帮助。谢谢！<divclass= 查看详情
如何使用 React-Native 和 Reanimated 2 为 svg 设置动画道具变换
】如何使用React-Native和Reanimated2为svg设置动画道具变换【英文标题】：HowtoanimateproptransformforsvgwithReact-NativeandReanimated2【发布时间】：2021-10-2510:39:21【问题描述】：importReact,FCfrom"react";importGfrom"react-native-svg";importAnimated,useAnima 查看详情
Firefox 上 CSS 动画前后的 SVG 模糊
...onFirefox【发布时间】：2014-10-2617:26:15【问题描述】：我想使用CSS转换为SVG徽标的某些部分设置动画。无动画的SVG渲染得非常好，在动画过程中，一切看起来都非常清晰。但是，在填充状态下，即在动画延迟期间和完成动画之后，... 查看详情
Safari 错误。当尝试使用模糊过滤器为 svg 转换设置动画时，safari 非常滞后
】Safari错误。当尝试使用模糊过滤器为svg转换设置动画时，safari非常滞后【英文标题】：Safaribug.Whentryingtoanimatesvgatransformationwithablurfilter,safariisverylaggy【发布时间】：2021-09-2210:55:04【问题描述】：我花了很多时间寻找类似的问题... 查看详情
设置内联 SVG 的填充颜色 [重复]
...te]【发布时间】：2020-06-0600:25:00【问题描述】：是否可以使用纯CSS（无JS）设置内联SVG的填充颜色？我有一个包含一些内容的元素，我需要将内容重置为简单的SVG图像（基本上是字形）动态重置该SCG的填充颜色（不是作为SVG的内... 查看详情
使用动画变换旋转地球 svg
】使用动画变换旋转地球svg【英文标题】：Spinningearthsvgusinganimatetransform【发布时间】：2020-10-0313:47:54【问题描述】：我正在尝试使用SVG<animateTransform>属性为地球旋转设置动画，遵循此tutorial。它工作得很好，但是当我... 查看详情
jQuery，SVG：如何为属性值（不是样式属性）设置动画？
..."..."/>我怎样才能做到这一点？或者，我可以使用替代方 查看详情
使用 GSAP 在滚动上为 SVG 设置动画
】使用GSAP在滚动上为SVG设置动画【英文标题】：AnimateSVGonscrollusingGSAP【发布时间】：2021-05-0617:43:47【问题描述】：GSAP有这个ScrollTrigger插件，可以在滚动时触发动画，我想使用它。我已经有了一个可以工作的SVG动画（没有GSAP）... 查看详情