講者：Yan
時間：2020 / 10 / 18
鋼鐵人
https://cssdeck.com/labs/ironman-svg-line-animation
https://codepen.io/ghepting/pen/xnezB
簽名
科技展示
https://tympanus.net/Development/SVGDrawingAnimation/index.html
然後你就獲得幫你畫好的靜態圖形了
<body> <svg id="svg-text" data-name="svg-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496.29 195.45"> <circle class="svg svg-circle animated" cx="97.72" cy="97.72" r="97.72"/> </svg></body>
首先把剛剛獲得的那串靜態圖形丟到 HTML 裡面
為它的 class id 加上 animated
（我們等一下要寫的動畫）
.svg-circle { ... stroke-dasharray: 60; stroke-dashoffset: 60;}
加上 stroke-dasharray 跟 stroke-dashoffset
line { stroke-dasharray: 60;}
line.l2{ stroke-dashoffset: 40;}
.animated { animation: drawing-svg 5s linear infinite;} @keyframes drawing-svg { 80% { stroke-dashoffset: 0; }}
然後結合 CSS 動畫效果
https://codepen.io/ericachiu/pen/bGeebYP
光程研創官網
https://www.artiluxtech.com/connect
台灣設計研究院
https://www.tdri.org.tw/about/
恩我忘記要做參考資料了
我...我晚點補的
By oneone
SIRLA - This 15 speech
