SVG手寫字母繪畫動畫

我想了解SVG動畫，我目前堅持要畫一個口號，字母寫的是字母。字體是手寫的，它應該像填寫文本標記一樣填充。任何人都可以給我一些提示如何解決這個問題？或者有沒有更好更有效的方法來做到這一點？SVG手寫字母繪畫動畫

這裏是我想信，信動畫的口號：

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21"> 
 
    <title>bedifferent</title> 
 
    <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M254.9,272.28c1.54,13.82,4,63-11.93,70.25-28.34,12.94-59.72-80-51.65-83.71,0,0,27.07-19.51,35.91-.14,2.46,5.38,15.19,41.83,9.64,46.75-2.28,2.13-14.62,1.69-14.62,1.69,6.94,13.3,16.73,25.74,22.11,23.28,5.2-2.37,7.07-40.07,5.55-57.15C249.58,270.59,254.57,269.18,254.9,272.28Zm-37.08,23.21c1.26-15.75-8.34-31.09-8.34-31.09C207,265.55,211.21,280.08,217.81,295.49Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M348.44,348.66c0.95,12.78,3.21,62-4.28,65.47-5.17,2.4-14.8,4.05-19.77-6.64-0.25-.54-3.38-7.75-5.45-12.2,1.08,11.2,2,23.54,1.85,24.06-2.55,6.17-7.7,7.69-13.21,9.82-7.65,3.12-24-25.49-30.67-42.75-3.2-7.83-18.51-40.81-9.42-45,9.45-4.39,19.14-5,26-3.2-9.09-20-18.91-42.14-19.82-44.1-2.15-4.64,14.75-20.5,16.71-15.34,0.9,2.4-.45,3.24,2.44,9.92,12.28,28.32,43.46,117,48.28,114.75,3-1.41,3.63-40.25,2.27-53.92C343.08,345.51,348.3,344.61,348.44,348.66Zm-36.1,31.92c-5.45-12.2-10.15-22.81-16.59-37.15-2.51-1.22-6-2.2-8-1.46-4,1.64,2.77,28.83,7.29,39.52,3,7.47,16.14,31.51,18,30.86C314.25,411.76,313.36,394,312.34,380.58Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M320.8,304.51c-4.7-1.72-11.25-24.25-11.25-24.25s10.44-8.31,14.62-6.79c4.52,1.8,11.25,24.25,11.25,24.25S325,306,320.8,304.51Zm66,25c4.42,59.48,5,62.67-3.88,66.8-1.25.58-9.67,3-9.67,3-10.69,1.71-43.67-73.55-45.33-77.11s-2.27-3.5-2.77-4.56c-1.08-2.32,13.76-10.5,16.45-9.37,5,1.81,36.58,81.61,41.57,79.29,1.07-.5.21-43.43-1.6-56.67C380.94,325.78,386.48,325.59,386.81,329.55Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M419.37,289.09c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45C408.12,410,350.13,260.34,349.14,258.2c-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.79C421.87,281.86,423.21,287.09,419.37,289.09Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M463.4,268.65c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45-30.29-10.64-88.28-160.31-89.27-162.45-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.78C465.9,261.43,467.24,266.65,463.4,268.65Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M523.44,227.91c1.62,13.76,8,97.72-10.64,108-27.73,14-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.91,25.7,22.19,23.07,8.57-4.26,6-77.84,4.37-94.86C518.12,226.26,523.09,224.82,523.44,227.91Zm-36,61.23c1.16-15.71-8.51-30.94-8.51-30.94C476.42,259.36,480.75,273.82,487.43,289.14Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M514,202.07c1.57,3.39,4.45,13.32,6.44,17.6,2.07,4.46,17.71-4.32,24.25,9.76,2.23,4.81,18.17,70.43,24.41,67.54,0,0,1.29-41.11.85-56.51-0.09-5.81,6.72-7.46,6.74-1.83-0.2,9.84.29,56.63,0.22,62.08-0.71,6.4-3.21,7.56-5.88,8.8-11.05,5.13-15.89,2.18-24.6-15.66-14.82-31.47-17.34-65.84-21-65.68-9.14-.09-19.11.85-20.57-3.24-1.3-3.73-9.05-21.37-5.66-22.94C501.51,200.91,512.39,198.68,514,202.07Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M625.14,218.93c1.62,13.76,4.42,62.74-11.45,70.1-28.17,13.07-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.84,25.55,22.19,23.07,5.17-2.4,6.79-40,5.17-57C619.82,217.28,624.79,215.84,625.14,218.93ZM588.32,242.3c1.16-15.71-8.51-30.94-8.51-30.94C577.32,212.53,581.64,227,588.32,242.3Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M689.08,188.17c1,6.27,4.12,64,1.09,65.36l-3.74,1.74c-14.44,6.7-34.14-26.41-46.26-51.11,1.08,2.32,5.47,26.71,19,55.95,1.32,2.85.17,6.42-7.86,10.15-11.41,5.3-46-79-46-79-1.41-3-2.76-1.75-3.92-4.25-0.58-1.25,15.64-8.78,20.11.85,1.41,3,15.47,33.34,16.54,32.84s-4.08-26.06-5.46-32.78c-2.4-5.17-3.79-8.64-4-9-0.5-1.07-1.15.32-1.9-1.29-0.5-1.07,15.29-11.87,22.66,4,21.68,46.71,33.28,61.9,35.24,61,1.07-.5.16-51-0.1-53.9A2.28,2.28,0,1,1,689.08,188.17Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M703.51,127.3l-22.28,10.34c13.61,34,33.6,87.32,39.84,84.43,0,0,1.18-40.41,1.26-52.37,0-4.57,5.05-4.51,5-.38,0.18,18.12.24,61.21,0.24,61.21,0.18,2.73,1.26,5-2.3,6.7-4.64,2.15-9,2.46-14.12,1.79-9-1.23-32-56.24-48.12-92.94l-12.48,5.79c-4.1,1.9-6.61-2.57-2.6-4.21,4.18-1.73,8.72-3.62,13.36-5.77-3.55-8.1-6.69-14.88-9.27-20-3.24-6.51-4.75-6-6-8.26-2.58-5.09,18.64-6.05,22.86-3,1.64,1.19,5.59,10.19,10.51,22.64,7.76-3.82,15.17-7.47,21.94-10.62C703.85,121.51,707.25,125.57,703.51,127.3Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M82.17,429c4.09-1.53,1.86-.59,4.09-1.53,2.46-1,132.17-63.07,159.43-60.26,5.54,0.64,10.36,9.56,6,14.19-15.26,15.62-46.85,39.33-55.38,45.33-3.67,2.55-6.35-.7-3.21-3.22,2.92-2.43,43.77-36,42.49-39.68-1.55-4.92-133,56.83-141.61,56.31C85.11,439.71,75.32,431.51,82.17,429Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M744.24,273.12c-8.83,8.46-208.15,82.33-205.23,87.63,2,4,77.46-7.6,82.88-8.41,5.75-.95,5.89,4.1-0.44,5.52-14.79,3.23-71,14-102,16-9,.43-12.17-11.06-6.8-16.73C539.35,329.52,737.1,257.46,740.72,256c3.29-1.34,0,0,5.84-2.61C756.28,249,753.4,264.52,744.24,273.12Z" transform="translate(-79.87 -108.93)" /> 
 
</svg>

codepen

來源

2016-05-13 Evolis

使用中風dasharray和動畫效果。這個網站上已有大量現有的問題和答案 –

現在你的SVG是製造方式不會讓你做動畫你在尋找。單獨使用stroke-dasharray動畫不會讓您畫出字母，就好像它們是用文本標記製作的，因爲筆畫在字母「周圍」。您可以在下面的例子中動畫看到這一點：

path{ 
 
    fill:transparent; 
 
    stroke:#000; 
 
    stroke-width:1; 
 
    stroke-dasharray:0,0,800; 
 
    animation:stroke 3s ease-out; 
 
} 
 
@keyframes stroke { 
 
    from { stroke-dasharray:0,800,800; } 
 
    to { stroke-dasharray:0,0,800; } 
 
}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21"> 
 
    <title>bedifferent</title> 
 
    <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M254.9,272.28c1.54,13.82,4,63-11.93,70.25-28.34,12.94-59.72-80-51.65-83.71,0,0,27.07-19.51,35.91-.14,2.46,5.38,15.19,41.83,9.64,46.75-2.28,2.13-14.62,1.69-14.62,1.69,6.94,13.3,16.73,25.74,22.11,23.28,5.2-2.37,7.07-40.07,5.55-57.15C249.58,270.59,254.57,269.18,254.9,272.28Zm-37.08,23.21c1.26-15.75-8.34-31.09-8.34-31.09C207,265.55,211.21,280.08,217.81,295.49Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M348.44,348.66c0.95,12.78,3.21,62-4.28,65.47-5.17,2.4-14.8,4.05-19.77-6.64-0.25-.54-3.38-7.75-5.45-12.2,1.08,11.2,2,23.54,1.85,24.06-2.55,6.17-7.7,7.69-13.21,9.82-7.65,3.12-24-25.49-30.67-42.75-3.2-7.83-18.51-40.81-9.42-45,9.45-4.39,19.14-5,26-3.2-9.09-20-18.91-42.14-19.82-44.1-2.15-4.64,14.75-20.5,16.71-15.34,0.9,2.4-.45,3.24,2.44,9.92,12.28,28.32,43.46,117,48.28,114.75,3-1.41,3.63-40.25,2.27-53.92C343.08,345.51,348.3,344.61,348.44,348.66Zm-36.1,31.92c-5.45-12.2-10.15-22.81-16.59-37.15-2.51-1.22-6-2.2-8-1.46-4,1.64,2.77,28.83,7.29,39.52,3,7.47,16.14,31.51,18,30.86C314.25,411.76,313.36,394,312.34,380.58Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M320.8,304.51c-4.7-1.72-11.25-24.25-11.25-24.25s10.44-8.31,14.62-6.79c4.52,1.8,11.25,24.25,11.25,24.25S325,306,320.8,304.51Zm66,25c4.42,59.48,5,62.67-3.88,66.8-1.25.58-9.67,3-9.67,3-10.69,1.71-43.67-73.55-45.33-77.11s-2.27-3.5-2.77-4.56c-1.08-2.32,13.76-10.5,16.45-9.37,5,1.81,36.58,81.61,41.57,79.29,1.07-.5.21-43.43-1.6-56.67C380.94,325.78,386.48,325.59,386.81,329.55Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M419.37,289.09c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45C408.12,410,350.13,260.34,349.14,258.2c-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.79C421.87,281.86,423.21,287.09,419.37,289.09Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M463.4,268.65c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45-30.29-10.64-88.28-160.31-89.27-162.45-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.78C465.9,261.43,467.24,266.65,463.4,268.65Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M523.44,227.91c1.62,13.76,8,97.72-10.64,108-27.73,14-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.91,25.7,22.19,23.07,8.57-4.26,6-77.84,4.37-94.86C518.12,226.26,523.09,224.82,523.44,227.91Zm-36,61.23c1.16-15.71-8.51-30.94-8.51-30.94C476.42,259.36,480.75,273.82,487.43,289.14Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M514,202.07c1.57,3.39,4.45,13.32,6.44,17.6,2.07,4.46,17.71-4.32,24.25,9.76,2.23,4.81,18.17,70.43,24.41,67.54,0,0,1.29-41.11.85-56.51-0.09-5.81,6.72-7.46,6.74-1.83-0.2,9.84.29,56.63,0.22,62.08-0.71,6.4-3.21,7.56-5.88,8.8-11.05,5.13-15.89,2.18-24.6-15.66-14.82-31.47-17.34-65.84-21-65.68-9.14-.09-19.11.85-20.57-3.24-1.3-3.73-9.05-21.37-5.66-22.94C501.51,200.91,512.39,198.68,514,202.07Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M625.14,218.93c1.62,13.76,4.42,62.74-11.45,70.1-28.17,13.07-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.84,25.55,22.19,23.07,5.17-2.4,6.79-40,5.17-57C619.82,217.28,624.79,215.84,625.14,218.93ZM588.32,242.3c1.16-15.71-8.51-30.94-8.51-30.94C577.32,212.53,581.64,227,588.32,242.3Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M689.08,188.17c1,6.27,4.12,64,1.09,65.36l-3.74,1.74c-14.44,6.7-34.14-26.41-46.26-51.11,1.08,2.32,5.47,26.71,19,55.95,1.32,2.85.17,6.42-7.86,10.15-11.41,5.3-46-79-46-79-1.41-3-2.76-1.75-3.92-4.25-0.58-1.25,15.64-8.78,20.11.85,1.41,3,15.47,33.34,16.54,32.84s-4.08-26.06-5.46-32.78c-2.4-5.17-3.79-8.64-4-9-0.5-1.07-1.15.32-1.9-1.29-0.5-1.07,15.29-11.87,22.66,4,21.68,46.71,33.28,61.9,35.24,61,1.07-.5.16-51-0.1-53.9A2.28,2.28,0,1,1,689.08,188.17Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M703.51,127.3l-22.28,10.34c13.61,34,33.6,87.32,39.84,84.43,0,0,1.18-40.41,1.26-52.37,0-4.57,5.05-4.51,5-.38,0.18,18.12.24,61.21,0.24,61.21,0.18,2.73,1.26,5-2.3,6.7-4.64,2.15-9,2.46-14.12,1.79-9-1.23-32-56.24-48.12-92.94l-12.48,5.79c-4.1,1.9-6.61-2.57-2.6-4.21,4.18-1.73,8.72-3.62,13.36-5.77-3.55-8.1-6.69-14.88-9.27-20-3.24-6.51-4.75-6-6-8.26-2.58-5.09,18.64-6.05,22.86-3,1.64,1.19,5.59,10.19,10.51,22.64,7.76-3.82,15.17-7.47,21.94-10.62C703.85,121.51,707.25,125.57,703.51,127.3Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M82.17,429c4.09-1.53,1.86-.59,4.09-1.53,2.46-1,132.17-63.07,159.43-60.26,5.54,0.64,10.36,9.56,6,14.19-15.26,15.62-46.85,39.33-55.38,45.33-3.67,2.55-6.35-.7-3.21-3.22,2.92-2.43,43.77-36,42.49-39.68-1.55-4.92-133,56.83-141.61,56.31C85.11,439.71,75.32,431.51,82.17,429Z" transform="translate(-79.87 -108.93)" /> 
 
    <path d="M744.24,273.12c-8.83,8.46-208.15,82.33-205.23,87.63,2,4,77.46-7.6,82.88-8.41,5.75-.95,5.89,4.1-0.44,5.52-14.79,3.23-71,14-102,16-9,.43-12.17-11.06-6.8-16.73C539.35,329.52,737.1,257.46,740.72,256c3.29-1.34,0,0,5.84-2.61C756.28,249,753.4,264.52,744.24,273.12Z" transform="translate(-79.87 -108.93)" /> 
 
</svg>

你需要使用的方法是剪輯與clipPath元素的字母（見here），然後作出一個新的路徑會「填充」clipPath。這可以通過動畫stroke-dasharray屬性進行。

您可以在此codepen（由Lars Munkholm製作）中看到示例。這顯示了一個具有非恆定筆畫寬度的手寫動畫。

來源

2016-05-13 13:29:54

使用stroke-dasharray可以爲邊界設置動畫效果，但爲了達到效果，我認爲您可以將路徑用作clipPath並將其應用於g元素;

然後在g元素內部繪製一個單獨的線路徑筆畫，您將動畫以模擬標記效果（寬度必須足夠寬以覆蓋字符線，但足夠窄以至於不會侵入下一個字符）;

這裏的動畫截取區域的背景的例子：

rect { 
 
    animation: scat 4s infinite alternate 
 
} 
 
@keyframes scat { 
 
    0% { 
 
    transform: scaleY(1) rotateZ(0); 
 
    } 
 
    33%{ 
 
    transform: scaleY(0.33) rotateZ(30deg); 
 
    } 
 
    66%{ 
 
    transform: scaleY(0.66) rotateZ(-30deg); 
 
    } 
 
    100% { 
 
    transform: scaleY(0.1) rotateZ(0); 
 
    } 
 
}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21"> 
 
    <defs> 
 
    <clipPath id='logo'> 
 
     <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M254.9,272.28c1.54,13.82,4,63-11.93,70.25-28.34,12.94-59.72-80-51.65-83.71,0,0,27.07-19.51,35.91-.14,2.46,5.38,15.19,41.83,9.64,46.75-2.28,2.13-14.62,1.69-14.62,1.69,6.94,13.3,16.73,25.74,22.11,23.28,5.2-2.37,7.07-40.07,5.55-57.15C249.58,270.59,254.57,269.18,254.9,272.28Zm-37.08,23.21c1.26-15.75-8.34-31.09-8.34-31.09C207,265.55,211.21,280.08,217.81,295.49Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M348.44,348.66c0.95,12.78,3.21,62-4.28,65.47-5.17,2.4-14.8,4.05-19.77-6.64-0.25-.54-3.38-7.75-5.45-12.2,1.08,11.2,2,23.54,1.85,24.06-2.55,6.17-7.7,7.69-13.21,9.82-7.65,3.12-24-25.49-30.67-42.75-3.2-7.83-18.51-40.81-9.42-45,9.45-4.39,19.14-5,26-3.2-9.09-20-18.91-42.14-19.82-44.1-2.15-4.64,14.75-20.5,16.71-15.34,0.9,2.4-.45,3.24,2.44,9.92,12.28,28.32,43.46,117,48.28,114.75,3-1.41,3.63-40.25,2.27-53.92C343.08,345.51,348.3,344.61,348.44,348.66Zm-36.1,31.92c-5.45-12.2-10.15-22.81-16.59-37.15-2.51-1.22-6-2.2-8-1.46-4,1.64,2.77,28.83,7.29,39.52,3,7.47,16.14,31.51,18,30.86C314.25,411.76,313.36,394,312.34,380.58Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M320.8,304.51c-4.7-1.72-11.25-24.25-11.25-24.25s10.44-8.31,14.62-6.79c4.52,1.8,11.25,24.25,11.25,24.25S325,306,320.8,304.51Zm66,25c4.42,59.48,5,62.67-3.88,66.8-1.25.58-9.67,3-9.67,3-10.69,1.71-43.67-73.55-45.33-77.11s-2.27-3.5-2.77-4.56c-1.08-2.32,13.76-10.5,16.45-9.37,5,1.81,36.58,81.61,41.57,79.29,1.07-.5.21-43.43-1.6-56.67C380.94,325.78,386.48,325.59,386.81,329.55Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M419.37,289.09c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45C408.12,410,350.13,260.34,349.14,258.2c-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.79C421.87,281.86,423.21,287.09,419.37,289.09Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M463.4,268.65c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45-30.29-10.64-88.28-160.31-89.27-162.45-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.78C465.9,261.43,467.24,266.65,463.4,268.65Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M523.44,227.91c1.62,13.76,8,97.72-10.64,108-27.73,14-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.91,25.7,22.19,23.07,8.57-4.26,6-77.84,4.37-94.86C518.12,226.26,523.09,224.82,523.44,227.91Zm-36,61.23c1.16-15.71-8.51-30.94-8.51-30.94C476.42,259.36,480.75,273.82,487.43,289.14Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M514,202.07c1.57,3.39,4.45,13.32,6.44,17.6,2.07,4.46,17.71-4.32,24.25,9.76,2.23,4.81,18.17,70.43,24.41,67.54,0,0,1.29-41.11.85-56.51-0.09-5.81,6.72-7.46,6.74-1.83-0.2,9.84.29,56.63,0.22,62.08-0.71,6.4-3.21,7.56-5.88,8.8-11.05,5.13-15.89,2.18-24.6-15.66-14.82-31.47-17.34-65.84-21-65.68-9.14-.09-19.11.85-20.57-3.24-1.3-3.73-9.05-21.37-5.66-22.94C501.51,200.91,512.39,198.68,514,202.07Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M625.14,218.93c1.62,13.76,4.42,62.74-11.45,70.1-28.17,13.07-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.84,25.55,22.19,23.07,5.17-2.4,6.79-40,5.17-57C619.82,217.28,624.79,215.84,625.14,218.93ZM588.32,242.3c1.16-15.71-8.51-30.94-8.51-30.94C577.32,212.53,581.64,227,588.32,242.3Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M689.08,188.17c1,6.27,4.12,64,1.09,65.36l-3.74,1.74c-14.44,6.7-34.14-26.41-46.26-51.11,1.08,2.32,5.47,26.71,19,55.95,1.32,2.85.17,6.42-7.86,10.15-11.41,5.3-46-79-46-79-1.41-3-2.76-1.75-3.92-4.25-0.58-1.25,15.64-8.78,20.11.85,1.41,3,15.47,33.34,16.54,32.84s-4.08-26.06-5.46-32.78c-2.4-5.17-3.79-8.64-4-9-0.5-1.07-1.15.32-1.9-1.29-0.5-1.07,15.29-11.87,22.66,4,21.68,46.71,33.28,61.9,35.24,61,1.07-.5.16-51-0.1-53.9A2.28,2.28,0,1,1,689.08,188.17Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M703.51,127.3l-22.28,10.34c13.61,34,33.6,87.32,39.84,84.43,0,0,1.18-40.41,1.26-52.37,0-4.57,5.05-4.51,5-.38,0.18,18.12.24,61.21,0.24,61.21,0.18,2.73,1.26,5-2.3,6.7-4.64,2.15-9,2.46-14.12,1.79-9-1.23-32-56.24-48.12-92.94l-12.48,5.79c-4.1,1.9-6.61-2.57-2.6-4.21,4.18-1.73,8.72-3.62,13.36-5.77-3.55-8.1-6.69-14.88-9.27-20-3.24-6.51-4.75-6-6-8.26-2.58-5.09,18.64-6.05,22.86-3,1.64,1.19,5.59,10.19,10.51,22.64,7.76-3.82,15.17-7.47,21.94-10.62C703.85,121.51,707.25,125.57,703.51,127.3Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M82.17,429c4.09-1.53,1.86-.59,4.09-1.53,2.46-1,132.17-63.07,159.43-60.26,5.54,0.64,10.36,9.56,6,14.19-15.26,15.62-46.85,39.33-55.38,45.33-3.67,2.55-6.35-.7-3.21-3.22,2.92-2.43,43.77-36,42.49-39.68-1.55-4.92-133,56.83-141.61,56.31C85.11,439.71,75.32,431.51,82.17,429Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
     <path d="M744.24,273.12c-8.83,8.46-208.15,82.33-205.23,87.63,2,4,77.46-7.6,82.88-8.41,5.75-.95,5.89,4.1-0.44,5.52-14.79,3.23-71,14-102,16-9,.43-12.17-11.06-6.8-16.73C539.35,329.52,737.1,257.46,740.72,256c3.29-1.34,0,0,5.84-2.61C756.28,249,753.4,264.52,744.24,273.12Z" 
 
     transform="translate(-79.87 -108.93)" /> 
 
    </clipPath> 
 

 

 

 
    </defs> 
 
<g clip-path="url(#logo)"> 
 
    <rect x="-150" y="0" width="972" height="333" /> 
 
</g> 
 

 
</svg>

來源

2016-05-13 15:14:49 maioman

SVG手寫字母繪畫動畫

回答

相關問題