在Raphaël创建和设计团体

时间:2011-11-22 17:32:13

标签: jquery svg raphael

我刚刚开始查看raphael.js库,以便在浏览器中构建SVG图形。本周我接触了常规的svg,希望为产品配置器构建一个快速的概念证明。我在插图画家中画了一件夹克的线条图,将其保存为SVG,然后将SVG代码复制并粘贴到HTML页面中。

http://jamesbillings.me/testjacket.html(在IE中不起作用)

请查看来源并查看我是如何做到的,这非常简单。

SVG和插画家所做的聪明之处在于,它通过分组或似乎被称为<g id's>的SVG来保存SVG,然后使用CSS为SVG设置样式。这样可以很容易地通过一些jquery快速命中g id来使部件消失或改变颜色。然而,我正在利用插图画中的绘图在rapheal中做同样的事情。

我想为IE8观众提供这个好处,这就是为什么我在看rapheal。如果没有在代码中创建图像,这是否可行。

2 个答案:

答案 0 :(得分:1)

我不是常规的Raphaël用户(我通常只做直接的SVG和vanilla DOM JS),但我可以告诉Raphaël明确不支持组(SVG <g>元素),因为他们不存在于VML土地上。

你最接近的是创建一个set并将所有元素推入其中,以便你的JS可以立即设置它们的样式。这不是通过CSS规则匹配的项目的便利性,并且它不是“实时”(向集合中添加项目不会导致它获取先前应用于该集合的属性),但是您无法使用VML执行此操作无论如何。

如果你必须支持IE8,我担心这是你最好的选择。

或者,您可以“轻推”您的IE8用户升级到IE9并完全忘记Raphaël抽象层并体验纯SVG的原始功能。 ;)

答案 1 :(得分:1)

我不确定Raphael在输出方面有太多性能问题。 您说您在着色插图文件时遇到问题。 刚看了你在iPod上的应用程序,我看不到服装的SVG

你真的需要建立自己对拉斐尔的信心,因为它在旧的Ie和iPod上表现得很好

在我的网站上,我刚刚构建了一个非常大的页面,并且没有涉及图形

在你那里,你可能会发现更容易理解拉斐尔

Raphael也是SVG的抽象层(这也是一个很棒的规范) 但是,如果您构建应用程序并且对用户群来说足够快,那么谁在乎它是否比纯SVG慢?

另外我认为人们对浏览器中SVG加载SVG及其所有JavaScript代码感到困惑

去这里 http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#pagetop