У меня есть SVG-файл, который представляет собой плоскую фигуру.
Я хотел бы создать анимацию, чтобы фигура постепенно прорисовывалась.
Такой пример анимации, как с логотипом «S» от бренда Samsung Galaxy S: https://codepen.io/anon/pen/MGawzy
@keyframes test {
0% {
clip-path: inset(0px 0px 300px 0px);
}
80% {
clip-path: inset(0px 0px 0px 0px);
}
100% {
clip-path: inset(0px 0px 0px 0px);
}
}
svg {
animation: test;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
<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"
xml:space="preserve"
enable-background="new 0 0 841.89 595.28"
viewBox="0 0 172.22023 242.623"
height="242.623"
width="172.22023"
y="0px"
x="0px"
id="Layer_1"
version="1.1"><metadata
id="metadata183"><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="defs181">
</defs>
<path
d="m 118.47279,116.80051 c -0.66437,0.0302 -16.42393,1.41842 -33.508628,3.99025 -14.046204,2.10151 -21.705778,1.74314 -26.785987,1.07134 C 47.450313,120.0293 40.205108,115.79638 37.678081,109.00284 28.977095,85.602387 79.350162,40.89571 150.20833,9.15625 157.64779,5.82666 164.98264,2.777 172.22023,0 159.60363,4.02397 146.54657,8.74193 133.2581,14.15446 53.669005,46.54682 -3.4079733,91.063371 5.7521203,113.5978 c 4.6211097,11.35868 25.2070687,14.94208 54.6918287,11.57516 0.05177,-0.01 0.122937,-0.01 0.178963,-0.01 17.15178,-1.60883 37.685548,-5.86787 50.406688,-4.83764 12.38894,1.53042 20.76507,5.90142 23.51606,13.30341 8.6938,23.39979 -41.686817,68.09918 -112.537605,99.84973 C 14.594923,236.80366 7.2340098,239.86079 0,242.623 c 12.616586,-4.00147 25.673652,-8.74948 38.965851,-14.147 79.585309,-32.38135 136.662329,-76.90897 127.498439,-99.45087 -4.25138,-10.46653 -22.1089,-14.33738 -47.9915,-12.22462 z"
id="path85"
style="fill:#000000;stroke-width:3.73272276" />
</svg>
Простой SVG в приведенном выше примере, легко анимировать, я могу просто медленно обрезать SVG сверху вниз.
Но если у меня очень сложная форма, которую я не могу анимировать, например, как это - (возможно, красная линия на эмблеме NASA: https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg), то нужно лучшее решение, чем у меня.
Чтобы снова прояснить, я не хочу оживлять stroke
. Я хочу иметь возможность анимировать fill
(заполнение)
Есть ли общее решение? Если общего решения нет, то как бы я мог сделать это самостоятельно в разумные сроки?
Чтобы дать некоторое представление, я пытаюсь анимировать скрипичный ключ: https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg
Примечание переводчика:
В данном топике применена оригинальная техника, которая позволяет анимировать рисование фигур с разной шириной на отдельных участках. Использовать технику рисования линий с изменением значений атрибута патча stroke-dashofset
в данном примере не получится, так как нужно прорисовывать не контур фигуры, а сразу всю ширину.
Но одновременное применение масок и изменение stroke-dashoffset
даёт нужный результат.
Свободный перевод вопроса Animating SVG fill linearly along length of path от участника @nulldev.