SVG笔画和填充动画

时间：2018-02-20 08:28:54

标签： css animation svg inkscape

我正在深入了解SVG及其工作原理（following this tutorial）。我想用SVG制作一个简单的动画，它可以为笔画设置动画，然后用一些颜色填充它。目前，我所取得的成就是为中风设置动画，但我无法填补它。

我还要删除＆＃34;不需要的metatags或元素＆＃34;它没有定义几何形状而没有改变它的行为，但我不知道哪些元素可能被删除。

＆＃13;
＆＃13; 
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 15s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
＆＃13; 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg6"
   version="1.1"
   xml:space="preserve"
   viewBox="0 0 40 25"
   height="25"
   width="40"><metadata
     id="metadata41"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs39" /><path
     id="path2" class="path"
     d="m 20,-0.0390625 c -8.738524,0 -16.3133051,5.0886654 -20.03515625,12.5214845 l -0.0078125,0.01758 0.0078125,0.01758 C 3.6866949,19.950397 11.261476,25.039062 20,25.039062 c 8.73829,0 16.313149,-5.088665 20.035156,-12.521484 l 0.0078,-0.01758 -0.0078,-0.01758 C 36.313305,5.0496023 28.73829,-0.0390625 20,-0.0390625 Z m 0,0.078125 c 8.700471,0 16.240477,5.0636856 19.953125,12.4609375 C 36.240322,19.897253 28.700471,24.960938 20,24.960938 11.299295,24.960938 3.7595231,19.897252 0.046875,12.5 3.7595231,5.1027475 11.299295,0.0390625 20,0.0390625 Z m -3.75,4.6875 c -2.092204,0 -3.789062,1.6968522 -3.789062,3.7890625 0,2.0922 1.696858,3.789063 3.789062,3.789063 2.092204,0 3.789062,-1.696863 3.789062,-3.789063 0,-2.0922103 -1.696858,-3.7890625 -3.789062,-3.7890625 z m 0,0.078125 c 2.049984,0 3.710938,1.6609478 3.710938,3.7109375 0,2.04998 -1.660954,3.710937 -3.710938,3.710937 -2.049984,0 -3.710938,-1.660957 -3.710938,-3.710937 0,-2.0499897 1.660954,-3.7109375 3.710938,-3.7109375 z m -5.574219,1.4492187 -0.09375,0.056641 C 10.426237,6.4035843 10.270636,6.4978471 10.117188,6.5957031 7.7622896,8.0977374 5.7663923,10.109501 4.2675781,12.478516 L 4.2558594,12.5 l 0.011719,0.02148 c 1.4988914,2.368853 3.4947124,4.380629 5.8496099,5.882813 2.959123,1.887486 6.376963,2.884765 9.882812,2.884765 3.50577,0 6.923687,-0.997279 9.882812,-2.884765 2.354897,-1.502114 4.350794,-3.513878 5.84961,-5.882813 L 35.744141,12.5 35.732422,12.478516 C 34.233529,10.109583 32.237867,8.0978175 29.882812,6.5957031 29.729351,6.4977886 29.573504,6.4035804 29.417969,6.3105469 l -0.09375,-0.056641 0.03711,0.1035157 c 0.387382,1.0633953 0.59961,2.210705 0.59961,3.4082031 0,5.501618 -4.459316,9.960937 -9.960938,9.960937 -5.501701,0 -9.960938,-4.459319 -9.960938,-9.960937 0,-1.1974981 0.212152,-2.34489 0.59961,-3.4082031 z M 10.548828,6.421875 c -0.370873,1.047471 -0.5878905,2.1692414 -0.5878905,3.34375 0,5.543842 4.4951375,10.039062 10.0390625,10.039063 5.543846,0 10.039062,-4.495221 10.039062,-10.039063 0,-1.1745086 -0.21709,-2.2962074 -0.58789,-3.34375 0.130547,0.078683 0.260001,0.1581373 0.388672,0.2402344 C 32.177279,8.152986 34.157303,10.150888 35.648438,12.5 34.15738,14.84911 32.177125,16.847013 29.839844,18.337891 26.893187,20.217424 23.490948,21.210937 20,21.210938 c -3.491027,0 -6.893188,-0.993514 -9.839844,-2.873047 C 7.8228755,16.846944 5.8426963,14.849033 4.3515625,12.5 5.8426188,10.15081 7.8228763,8.1529063 10.160156,6.6621094 10.288838,6.5800473 10.418191,6.5005372 10.548828,6.421875 Z"
     style="stroke:black;stroke-width:1;" /></svg>
＆＃13;
＆＃13;
＆＃13;

P.S：我用Inkscape创建了SVG，将所有组合在一个组中并使用选项＆＃34; Stroke to path＆＃34;只进行一次击打并为它们制作动画。

2 个答案:

答案 0 :(得分：1)

您的问题听起来像是在寻找svgo

  

SVG文件，尤其是从各种编辑器导出的文件，通常包含大量冗余和无用的信息，例如编辑器元数据，注释，隐藏元素，默认或非最佳值以及可在不影响SVG的情况下安全删除或转换的其他内容渲染结果。

根据我使用svgo test.svg优化所有内容的经验可能会导致奇怪的图像错误。 因此，请使用不同的插件逐步优化您的svg。

  1. 用true覆盖--config属性以禁用所有插件（很奇怪是）
  2. 使用--enable
    3. 启用所需的插件

    svgo --config='{"full":true}' --enable=removeMetadata test.svg

    不过，那个动画很酷 - 可能需要一些抗锯齿功能。

答案 1 :(得分：1)

这取决于你的意思＆＃34;填充＆＃34;。您的图标设计为非常薄的填充，看起来像中风。

如果我们关闭笔划并给它一个红色填充，它看起来像这样：

＆＃13;
＆＃13; 
.path {
  fill: red;
}
＆＃13; 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg6"
   version="1.1"
   xml:space="preserve"
   viewBox="0 0 40 25"
   height="250"
   width="400"><metadata
     id="metadata41"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs39" /><path
     id="path2" class="path"
     d="m 20,-0.0390625 c -8.738524,0 -16.3133051,5.0886654 -20.03515625,12.5214845 l -0.0078125,0.01758 0.0078125,0.01758 C 3.6866949,19.950397 11.261476,25.039062 20,25.039062 c 8.73829,0 16.313149,-5.088665 20.035156,-12.521484 l 0.0078,-0.01758 -0.0078,-0.01758 C 36.313305,5.0496023 28.73829,-0.0390625 20,-0.0390625 Z m 0,0.078125 c 8.700471,0 16.240477,5.0636856 19.953125,12.4609375 C 36.240322,19.897253 28.700471,24.960938 20,24.960938 11.299295,24.960938 3.7595231,19.897252 0.046875,12.5 3.7595231,5.1027475 11.299295,0.0390625 20,0.0390625 Z m -3.75,4.6875 c -2.092204,0 -3.789062,1.6968522 -3.789062,3.7890625 0,2.0922 1.696858,3.789063 3.789062,3.789063 2.092204,0 3.789062,-1.696863 3.789062,-3.789063 0,-2.0922103 -1.696858,-3.7890625 -3.789062,-3.7890625 z m 0,0.078125 c 2.049984,0 3.710938,1.6609478 3.710938,3.7109375 0,2.04998 -1.660954,3.710937 -3.710938,3.710937 -2.049984,0 -3.710938,-1.660957 -3.710938,-3.710937 0,-2.0499897 1.660954,-3.7109375 3.710938,-3.7109375 z m -5.574219,1.4492187 -0.09375,0.056641 C 10.426237,6.4035843 10.270636,6.4978471 10.117188,6.5957031 7.7622896,8.0977374 5.7663923,10.109501 4.2675781,12.478516 L 4.2558594,12.5 l 0.011719,0.02148 c 1.4988914,2.368853 3.4947124,4.380629 5.8496099,5.882813 2.959123,1.887486 6.376963,2.884765 9.882812,2.884765 3.50577,0 6.923687,-0.997279 9.882812,-2.884765 2.354897,-1.502114 4.350794,-3.513878 5.84961,-5.882813 L 35.744141,12.5 35.732422,12.478516 C 34.233529,10.109583 32.237867,8.0978175 29.882812,6.5957031 29.729351,6.4977886 29.573504,6.4035804 29.417969,6.3105469 l -0.09375,-0.056641 0.03711,0.1035157 c 0.387382,1.0633953 0.59961,2.210705 0.59961,3.4082031 0,5.501618 -4.459316,9.960937 -9.960938,9.960937 -5.501701,0 -9.960938,-4.459319 -9.960938,-9.960937 0,-1.1974981 0.212152,-2.34489 0.59961,-3.4082031 z M 10.548828,6.421875 c -0.370873,1.047471 -0.5878905,2.1692414 -0.5878905,3.34375 0,5.543842 4.4951375,10.039062 10.0390625,10.039063 5.543846,0 10.039062,-4.495221 10.039062,-10.039063 0,-1.1745086 -0.21709,-2.2962074 -0.58789,-3.34375 0.130547,0.078683 0.260001,0.1581373 0.388672,0.2402344 C 32.177279,8.152986 34.157303,10.150888 35.648438,12.5 34.15738,14.84911 32.177125,16.847013 29.839844,18.337891 26.893187,20.217424 23.490948,21.210937 20,21.210938 c -3.491027,0 -6.893188,-0.993514 -9.839844,-2.873047 C 7.8228755,16.846944 5.8426963,14.849033 4.3515625,12.5 5.8426188,10.15081 7.8228763,8.1529063 10.160156,6.6621094 10.288838,6.5800473 10.418191,6.5005372 10.548828,6.421875 Z"
     style="stroke:black;stroke-width:0;" /></svg>
＆＃13;
＆＃13;
＆＃13;

如果你想要填充线条之间的区域，使它看起来更像一只眼睛，那么首先你需要改变路径。

你还需要解释你的意思＆＃34;用一些颜色填充它＆＃34;。你的意思是填充出现？填充物从白色淡入？填充物像水中的水一样上升？

也许你是在追求这样的事情？ SVG animate. Fill path after drawn

相关问题
最新问题