颠覆网络35天 ─ Tristan牌滚筒洗衣机

原文地址：the tristan washing machine
系列地址：颠覆网络35天

====================================

这个演示还是来自Paul Rouget。非常简单但是非常有趣的演示，把视频、SVG和变形等效果组合在一起。

使用Firefox 3.5查看演示

tristan

演示把HTML5的<video>元素放到了SVG文档中：


<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新特性来定义播放器。例如，如果查看CSS的代码的话，会看到：


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

clip-path属性允许为任何HTML、SVG等元素定义裁剪路径。我们这里定义的裁剪路径是：


<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>

您还可以在Firefox 3.5中使用SVG来为任何元素定义色彩渐变蒙板，不过这个演示中还没有演示到。

当视频在播放时，演示中还使用变形属性来旋转视频：


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

您可能已经注意到，Paul使用XHTML构建这个演示，小心的使用命名空间和XML语法。但是大部分人会希望在简单的HTML中使用SVG。在Firefox 3.5中，可以使用SVG 外部文档引用来实现这个。其实就是，您可以像实现CSS那样，在HTML文档外部定义SVG，然后在文档中引用：


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

上述语句定义了使用resources.svg文件读取SVG定义，然后使用ID为“c1”的对象作为目标的裁剪路径。非常简单的可以加入SVG定义而不是非要使用XHTML。

希望这个演示能够激发更多的想象，把SVG、HTML、视频和CSS所有的混合在一起～ Enjoy!

[译注] Tristan是Mozilla France和欧洲的负责人之一，就是上面演示中视频里面被恶搞的主角。

Post a comment | Trackback URI