RaphaelJS - 优于传统 SVG 和 CSS3

Question

我希望在网站上制作一些动画，并希望使用 SVG 图形。

我听说 Raphael 是一个很棒的库来帮助渲染图形，但我试图在我的公司说明为什么我们应该使用它而不是传统的 SVG 或只使用 CSS3 动画进行操作。从Stack Overflow post on SVG vs CSS3、Raphael Tutorial 和 this obnoxious looking Raphael site，我收集了一些关于为什么我们应该使用 Raphael 库而不是传统 SVG 或 CSS3 动画的信息：

CSS3：

• 传统上用于 sprite/png 动画，导致缩放期间质量损失

传统 SVG：

• 无法操作现有的 HTML 元素
• 可以使用 CSS3 中的计时功能无法使用的线条动画绘制事物
• 可以在绘制对象后与对象交互
• SVG 元素可以触发事件并且可以使用 SVG 编写脚本
• 可以操作导入的 SVG 文件的任何方面（类似于 Illustrator 中的复杂徽标）

拉斐尔 JS：

• 在我看来是一个简单的包装库（类似于 jQuery），它使一些传统的 SVG 操作操作更容易编写？

我想出了一些拉斐尔似乎引人注目的比较......

形状：

CSS3：

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

<div id="circle"></div>

SVG：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

拉斐尔：

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80); //cleaner 
circle.attr({fill: 'red', stroke: 'black', 'stroke-width': 2});

操纵：

CSS3：类似...

@keyframes moveCircle {
  from { /* start value */ }
  to { /* end value */ }
}

<div id="moveCircle"></div>

SVG：更复杂

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />

拉斐尔：像这样：

circle.node.onclick = function () {
    this.animate({ cx: this.cx+=100, cy: this.cy+=100}, 1000);
};    

此外，使用path("M 0 0 l...") 和贝塞尔曲线（用于图形）在 Raphael 中似乎更容易绘制自定义线等，但仍然使用 SVG 和 CSS3。

基本上，我没有令人信服的案例，因为我不完全了解 CSS3 或 SVG，因此无法知道 Raphael 会从哪里来救援。我希望有人能帮助我理解。

Answer 1

Raphaels 的主要优势在于它的向后兼容性以及能够与旧版浏览器一起使用，而您没有提到这是否是必需的。

如果不需要旧版浏览器支持，您可能需要研究 Snap 或 svg.js 之类的东西，它们支持额外的 svg 元素，如“组”，还可以导入 svg 文件，然后进行操作和动画处理。使用 Raphael，您必须自己创建所有内容，而不是使用现有的 SVG，这可能是一个缺点。

实现 afaik 很重要（没有额外的库，我认为那里有一个导入库），我认为您无法使用 Raph 操作现有的 SVG。

CSS3 的优势，动画可以提供更好的性能，我会检查这一点，特别是如果它可能的移动设备可能是重要的受众。您还可以查看像 velocity.js 这样的库，它对良好的动画速度很有好处。

还有一些其他选项，可以使用画布和库，例如 fabric.js。同样，这取决于您需要的浏览器兼容性。

所以基本上我会先尝试找出您需要支持哪些设备和浏览器，然后可能会因为这个要求而在性能和灵活性方面做出一些权衡。

还值得记住的是，您可以将 svg 与 css 结合使用，同样您可能需要查看 css3 和浏览器支持到底需要什么。