SVG_37_六一兒童節快樂-路徑移動-火焰文字

六一了，做個簡單特效。

說明：關於文章時效性問題，公衆號是第一時效性的，會根據具體時間進行文章的發佈，CSDN裏面的文章可能稍有延遲，因爲我是一般週末抽出點時間，在這裏發佈。如想獲取第一手文章，請關注公衆號。

 

實現原理：利用了火焰背景特效、textpath文字引用路徑、路徑移動特效和點擊後的一個漸變。

動態文字特效文章還有：

SVG_30_火爆的Xi說SVG與孔方兄在看火燒赤壁

SVG_31_溫柔似水的Xi說SVG

文字路徑移動特效：

知識點：

除了筆直地繪製一行文字以外， SVG 也可以根據 <path> 元素的形狀來放置文字。只要在textPath元素內部放置文本，並通過其xlink:href屬性值引用<path>元素，我們就可以讓文字塊呈現在<path>元素給定的路徑上了。

如上，使用了textPath子標籤時，需要寫在text標籤對兒之中。在defs定義好path，在textpath中，通過xlink:href="id"引用。同時使用animate定義了位移動畫，動畫控制的屬性爲startOffset，這裏要注意。

這個與之前的一篇SVG_23_mpath標籤_軌跡複用很相似，都是通過引用外部定義好的路徑。

關鍵代碼

  <defs>    <path id="MyPath"          d="M 100 200              C 200 100 300   0 400 100             C 500 200 600 300 700 200             C 800 100 900 100 900 100" />  </defs>  <text font-family="Verdana" font-size="42.5">    <textPath xlink:href="#MyPath" fill="url(#fire)">      六一兒童節快樂             <animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite"/>    </textPath>  </text>

至於點擊後的一個漸變，使用的是animate控制透明度opactiy。

 

祝各位老朋友、大朋友、小朋友，六一快樂。

Xi說孔方兄認證