顛覆網路 35 天：SVG + Video = 滾筒洗衣機！

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

View the Demo in Firefox 3.5

這個範例中，我們在 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 的威力，好好玩喔！