创建交互式SVG HTML表单的最佳方法

Question

我的任务是创建HTML表单的交互式可视版本。

在各个领域，工人将他们的熟练程度评为1（差）至5（优秀）：

Client Management:

[x] 1 (Poor)
[ ] 2 (OK)
[ ] 3 (Good)
[ ] 4 (Great)
[ ] 5 (Excellent)

然而，不是仅使用单选按钮，而是将它们以极坐标网格的形式显示出来。

饼图的每个切片代表一个能力区域（例如，与客户一起工作），切片的每个片段表示用户对其的熟练程度。 This is a 3D representation

用户将能够为每个能力区域选择一个段，相当于1-5，然后最终提交它，就像它是一个表单一样。我开始在Illustrator中创建一个SVG并添加类来使用JS / jQuery来操作它。然后我使用这些类来填充一组隐藏的单选按钮，这样我就可以实际提交数据了。

It works。

然而，必须是一种不那么简单的创建和与SVG交互的方式，这对于可维护性更好。例如，如果我想添加一个新的段，我将不得不在Adobe Illustrator中重新创建图形并向该文件添加一组新的类（以及将旧的类重新添加到新的输出中）。 / p>

从可维护性的角度来看，解决这种交互式SVG的最佳方法是什么？

Answer 1

有几个JavaScript库可以创建，操作和动画SVG。最着名的是RaphaëlJS（http://raphaeljs.com）和Snap.svg（http://snapsvg.io）。 RaphaëlJS甚至可以通过VML后备功能在IE6等传统浏览器上运行。 Snap.svg专为现代浏览器而设计。

Answer 2

SVG不是一种表格技术，所以你不会找到任何完美的东西。虽然我认为d3与DIY有关，但这是一个非常不错的用例（see examples gallery）。

您可以在大约50行d3代码中执行此操作。也许更少。

正如罗伯特的评论暗示这在技术上是使用DOM创建svg，但是使用d3是一种比手动操作更好的方法。

我注意到d3对svg来说几乎就像jquery是html（它实际上对html很有用，但用例在svg中更常见）。与jQuery类似，您几乎可以立即开始使用d3，但是您投入更多时间来学习它并且＃34;获得它＆＃34;你将获得更多的好处。

Answer 3

将JavaScript应用于SVG与将其应用于HTML没有什么不同。 SVG是基于代码的图像，在浏览器基于SVG文件的代码呈现时绘制。您可以将文件直接合并到页面中，也可以嵌入它。然后，您只需像将HTML中的元素一样将JavaScript应用于SVG的元素。

首先，进入SVG文件（假设它与页面分开）并添加您要使用的任何标识符（class或id）。

其次，将您的JavaScript编写为好像它只是您想要操作的另一个HTML元素。所以，如果你想在鼠标悬停在某个部分上时发生某些事情，那么写下它就好了你想要发生在一个按钮上并用该按钮代替目标SVG元素。

修改： 从对我的回复的评论中可以看出，即使嵌入了SVG，DOM也会单独处理它，这就是你应该直接包含SVG代码的原因。

这是JSFiddle演示直接将代码添加到页面。如果你将鼠标移到嘴边，它会变红。

如果您将SVG作为img添加到页面中，它将呈现为图像，JavaScript将无效。这是一个JSFiddle来证明这一点。

但是，如果您使用object或embed，JavaScript仍然可以使用它。以下是添加SVG的五种主要方法的工作示例：http://www.schepers.cc/svg/blendups/embedding.html

至于容易修改SVG，可以通过代码（在文本编辑器中）或GUI编辑器（如Illustrator）。只要您拥有原始文件，编辑它就不会有问题，但是没有“简单”的方法。关于SVG的一个好处是它完全是一个可编程图像。当然，能够以视觉方式设计它是很好的，这就是网页设计师为网站所做的事情，但如果你想“真正”使用它，你需要使用代码。

我很抱歉，如果这不是你要找的答案，但我希望这有助于澄清事情。