个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
如何使用Illustrator 的路径SVG 制作动画。在我在那里完成对象制作后，我从 illustrator 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" 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>动画只使用描边绘制，不使用填充..
你能帮我吗，如何制作带有填充的动画绘图 svg，而不是使用描边(没有描边)
最佳答案
正如罗伯特所说，您需要解释“动画填充”的含义。您可以通过多种方式做到这一点。
但也许像下面这样的东西是您想要的？
<!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>关于css - 使用填充动画 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28458269/
25
4
0
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。 任何人都可以对此给出任何指导吗？ 谢谢 最佳答案 这是一篇关于
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式 我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。 而且我的 jquery 类和 insertadjacentHTMl 也不
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。 这是输入和标签的结构:
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除 按钮。问题是 Delete 按钮在新插入的元素上不起作用，
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。 使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。 例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地 输
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。 这是一个获取输入值、检查选择
我想使用 angularjs 从 mysql 数据库加载数据。 这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上 我想获取这个值并通过 angularjs
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。 这就是我想要实现的目标 所以在这里你可以看到我正在谈论的
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？ 现在，在比较 col.1 和
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {
我是一名优秀的程序员,十分优秀！