2009/7/24

顛覆網路 35 天:SVG + Video = 滾筒洗衣機!

這一篇,我們將再度見識混搭網際標準時可以展現的效果,先來看看範例:

View the Demo in Firefox 3.5 tristan

這個範例中,我們在 SVG 文件裡塞了個 HTML 5 的 VIDEO 標籤。以下是精簡過的程式碼:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
               width="194" height="194">
  <svg:foreignObject x="1" y="1" width="192" height="192">
    <html:video src="tristan3.ogv" ontimeupdate="rotateMePlease()"/>
  </svg:foreignObject>
</svg:svg>

播放鈕什麼的也是用 SVG 做的喔!此外這範例裡也利用了 Firefox 3.5 中的 CSS 套用 SVG 濾鏡功能,如下:

#video {
    filter: url(#filter);
    clip-path: url(#circle);
}

這個 clip-path 特性能為任何元素 (html、svg 等) 定義裁切路徑,可以是任何以 SVG 繪製好的路徑,超強的喔!例如本例裡的 #circle 路徑原始碼如下:

<svg:clipPath id="circle" clipPathUnits="objectBoundingBox">
   <svg:circle cx="0.5" cy="0.5" r="0.5"/>
</svg:clipPath>

而 filter 特性則能定義 SVG 濾鏡,本例裡我們採用的是 feColorMatrix

<svg:filter id="filter">
  <svg:feColorMatrix values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/>
</svg:filter>

影片播放後,我們利用 transformation 來讓影片元素旋轉:

function rotateMePlease() {
    // Sure
    if (!video) return;
    video.style.MozTransform='rotate(' + i + 'deg)';
    i += 3;
}

作者 Paul 把所有程式定義在 XHTML 文件中,並且處處使用良好的 XML 語法及名稱空間,不過你可能會想在 HTML 文件中使用一樣的效果。Firefox 3.5 裡可以參照外部 SVG 文件,你就不必把原本的 HTML 整個轉化為 XHTML 了:

.target { clip-path: url(resources.svg#c1); }

從這個範例裡你可以看到混搭 SVG、HTML、VIDEO 及 CSS 的威力,好好玩喔!

2 則留言:

歡迎留下您的意見