SVG 描边和填充动画
SVG stroke and fill animation
我正在深入学习 SVG 及其工作原理 (following this tutorial)。我想用 SVG 制作一个简单的动画，它为笔划设置动画，然后用一些颜色填充它。目前，我所取得的成就是为笔画设置动画，但我无法填充它。
我还想删除 "unnecesary metatags or elements"，它没有定义几何图形而不改变它的行为，但我不知道可以删除哪些元素。
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 15s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<?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>
P.S：我使用 Inkscape 创建了 SVG，将所有内容分组并使用选项 "Stroke to path" 仅制作 1 个笔划并为其设置动画。
你的问题听起来像是在寻找 svgo
SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.
根据我使用 svgo test.svg 的经验，优化所有内容可能会导致奇怪的图像错误。
因此，使用不同的插件逐步优化您的 svg。
- 用 true 覆盖
--config 属性 full 以禁用所有插件（很奇怪是的）
- 使用
--enable 启用您想要的插件
svgo --config='{"full":true}' --enable=removeMetadata test.svg
顺便说一句，那个动画很酷 - 可能需要一些抗锯齿。
这取决于你所说的 "fill" 是什么意思。您的图标设计有非常细的填充，看起来像笔触。
如果我们关闭描边并给它一个红色填充，它看起来像这样：
.path {
fill: red;
}
<?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>
如果你想让线条之间的区域被填充，让它看起来更像一只眼睛，那么首先你需要改变路径。
您还需要解释 "fill it with some colour" 的含义。你是说填充出现了吗？填充从白色淡入？填充物像玻璃杯中的水一样上升？
也许您正在寻找这样的东西？
我正在深入学习 SVG 及其工作原理 (following this tutorial)。我想用 SVG 制作一个简单的动画，它为笔划设置动画，然后用一些颜色填充它。目前，我所取得的成就是为笔画设置动画，但我无法填充它。
我还想删除 "unnecesary metatags or elements"，它没有定义几何图形而不改变它的行为，但我不知道可以删除哪些元素。
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 15s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<?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>
P.S：我使用 Inkscape 创建了 SVG，将所有内容分组并使用选项 "Stroke to path" 仅制作 1 个笔划并为其设置动画。
你的问题听起来像是在寻找 svgo
SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.
根据我使用 svgo test.svg 的经验，优化所有内容可能会导致奇怪的图像错误。
因此，使用不同的插件逐步优化您的 svg。
- 用 true 覆盖
--config属性 full 以禁用所有插件（很奇怪是的） - 使用
--enable 启用您想要的插件
svgo --config='{"full":true}' --enable=removeMetadata test.svg
顺便说一句，那个动画很酷 - 可能需要一些抗锯齿。
这取决于你所说的 "fill" 是什么意思。您的图标设计有非常细的填充，看起来像笔触。
如果我们关闭描边并给它一个红色填充，它看起来像这样：
.path {
fill: red;
}
<?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>
如果你想让线条之间的区域被填充，让它看起来更像一只眼睛，那么首先你需要改变路径。
您还需要解释 "fill it with some colour" 的含义。你是说填充出现了吗？填充从白色淡入？填充物像玻璃杯中的水一样上升？
也许您正在寻找这样的东西？