在 Raphaël 中创建和设置组样式答案

【问题标题】：Creating and styling groups in Raphaël在 Raphaël 中创建和设置组样式
【发布时间】：2011-11-23 06:56:46
【问题描述】：

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

http://jamesbillings.me/testjacket.html（在 IE 中不起作用）

请查看源代码，看看我是怎么做的，很简单。

SVG 和 illustrator 所做的聪明的事情是使用分组或似乎被称为 <g id's> 的方式保存 SVG，然后使用 CSS 设置 SVG 样式。这可以很容易地用一点 jquery 快速点击 g id 以使零件消失或改变颜色。但是，我正在努力在 rapheal 中使用 illustrator 中的绘图来做同样的事情。

我想为 IE8 浏览器提供这个好处，这就是我关注 rapheal 的原因。有谁知道这是否可行，而无需在代码中创建图像。

【问题讨论】：

能否请您编辑问题的标题，以便更好地了解您需要做什么，现在标题含糊不清

标签： jquery svg raphael

【解决方案1】：

我不是 Raphaël 的普通用户（我通常只使用 SVG 和原版 DOM JS），但据我所知，Raphaël 明确不支持组（SVG <g> 元素），因为它们不存在于VML 土地。

您最接近的方法是创建一个set 并将所有元素推入其中，以便您的 JS 可以立即为它们设置样式。这不是通过 CSS 规则匹配的项目的便利性，也不是“实时”的（将项目添加到集合不会导致它获取先前应用于该集合的属性），但是您无法使用 VML 做到这一点无论如何。

如果你一定要支持IE8，恐怕这是你最好的选择。

或者，您可以“推动”您的 IE8 用户升级到 IE9，完全忘记 Raphaël 抽象层，体验纯 SVG 的原始力量。 ;)

【讨论】：

感谢您的反馈，正如我所想。 Raphael 看起来是跨浏览器的 SVG 的一个很好的替代品，但正如你所说的“没有 Raphael 抽象层，SVG 的原始力量会得到更好的体验”

【解决方案2】：

我不确定 Raphael 在输出方面存在太多性能问题。您说您在为 Illustrator 文件着色时遇到问题。刚看了你在 iPod 上的应用，我看不到衣服的 SVG

你真的需要建立对 Raphael 的信心，因为它在旧版 Ie 和 iPod 上表现得很好

在我的网站上，我刚刚构建了一个很大的页面，并且没有涉及任何图形

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

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

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

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

【讨论】：

抱歉，如果您在 ipod 上看不到 svg 绘图，我可能没有遵循在 HTML 中嵌入 SVG 的所有规则。我知道它适用于ipad。试试 Firefox 或 Chrome，应该可以的。
我查看了您的网站，该网站非常酷，但与我想要实现的目标截然不同。我正在处理的图纸和形状更具技术性，只能来自插图文件，您不能手动编码。所以我的问题是如何将在 illustrator 中创建的绘图转换为 SVG，然后转换为 rapheal，然后通过改变颜色和部分消失来操作 SVG 的某些部分。因为你不能像 SVG 这样在 raphael 中对事物进行分组，这就是我苦苦挣扎的地方。如果你有更好的见解，我很乐意听到。谢谢
这一切都必须由用户在页面中实时完成。干杯。
James 可以把插画文件发给我吗？我在网站上有一个转换器。我想看看它是否可以处理您的 SVG。这是 SVG 夹克的链接。这只是一种格式，如果您只想要纯 SVG 可用于..irunmywebsite.com/raphael/p_jackets.php
嘿，当然。我只是将它通过 ftp'd 到我的一个站点，一定要看看。 jamesbillings.me/micro.ai我已经成功转换了它，但我不知道如何在网页中对其进行交互控制。