這一篇，我們將再度見識混搭網際標準時可以展現的效果，先來看看範例：
這個範例中，我們在 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 的威力，好好玩喔！
