[H5] 讓 Internet Explorer / WebBowser Control 支援 SVG 內的走馬燈

IE 支援 HTML5 不完整是已知的事實,對 IE 的抱怨就不多說了,直接談問題吧。

因為考慮到行動裝置縮放問題及智慧電視展示,在開發長時間展示畫面因為不確定將會在 Full HD 的電視顯示、電腦或是行動裝置,因此透過 HTML5 + SVG 算是比較通用的方案,IE / WebBowser Control 也能有不錯的支援。

由於有縮放問題,所以傳統 HTML4 的 marquee 就不太適合。

配合 SVG 的語法,嵌入走馬燈可以選用 animate:

<svg x='3' y='712' width='1366' height='36'>
   <animate TARGETELEMENT='ID名稱' xlink:href='#ID名稱' attributeName="x" from="1366" to="-2000" dur="30s" repeatCount="indefinite" />
   <text x='0%' y='70%' fill='white' id='ID名稱'>走馬燈或跑馬燈的文字</text>
</svg>

但是很冏,Internet Explorer / WebBowser Control 不支援,從微軟網站可以找到程式碼透過 Script 跑,所以算是客製化,針對每個 ID 都要自己寫。

為了節省時間,可以到這個網站下載已開發好的套件,官方首頁為:https://leunen.me/fakesmile/

從 Source Code 下載 smil.user.js ,再於 head 區引入即可。

<head>
   <script type="text/javascript" src="smil.user.js"></script>
</head>

不會妨礙 Chrome 或行動裝置相容。

當然比較起來,Chrome 跑起來比較順,IE 跑起來就比較閃爍了。

Categories: 工作點滴, 技術分享 | Tags: , , , , , | 發表留言

文章導覽

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

在WordPress.com寫網誌.

%d 位部落客按了讚: