创建交互式 SVG HTML 表单的最佳方式
Best way to create interactive SVG HTML form
我的任务是创建 HTML 表单的交互式可视化版本。
工人对他们在各个领域的熟练程度评分在 1（差）到 5（优秀）之间：
Client Management:
[x] 1 (Poor)
[ ] 2 (OK)
[ ] 3 (Good)
[ ] 4 (Great)
[ ] 5 (Excellent)
然而，不仅仅是使用单选按钮，我们的想法是它们以极坐标网格的形式可视化。
馅饼的每一片代表一个能力领域（例如，与客户合作），每一片片代表用户在这方面的熟练程度。 This is a 3D representation.
用户将能够 select 每个能力领域的一个片段，相当于 1-5，然后最终将其作为表格提交。我首先在 Illustrator 中创建一个 SVG，然后添加 类 以使用 JS/jQuery 对其进行操作。然后我使用这些 类 来填写一组隐藏的单选按钮，这样我就有了一种实际提交数据的方法。
但是，必须有一种更少的 DIY 方式来创建 SVG 并与之交互，这对于可维护性会更好。例如，如果我想添加一个新片段，我将不得不在 Adobe Illustrator 中重新创建图形并将一组新的 类 添加到文件中（以及将旧的重新添加到新的输出）。
从可维护性的角度来看，处理这种交互式 SVG 的最佳方法是什么？
有几个 JavaScript 库可以创建、操作和动画化 SVG。最著名的是 RaphaëlJS (http://raphaeljs.com) and Snap.svg (http://snapsvg.io)。通过 VML 回退，RaphaëlJS 甚至可以在 IE6 等传统浏览器上工作。 Snap.svg 专为现代浏览器设计。
SVG 不是一种表单技术，因此您找不到任何完美的东西。虽然我认为 d3 的任何东西都是 DIY，但这是一个非常不错的用例 (see examples gallery)。
你大概可以用 50 行左右的 d3 代码来完成。也许更少。
正如 Robert 的评论所暗示的那样，这在技术上是使用 DOM 创建 svg，但是使用 d3 是一种比手动创建更好的方法。
我会注意到 d3 之于 svg 几乎就像 jquery 之于 html（它实际上对 html 也很有用，但用例更常见于 svg） .与 jQuery 类似，您几乎可以立即开始使用 d3，但是您投入更多的时间来学习它，"getting it" 您将获得更多的好处。
将 JavaScript 应用于 SVG 与将其应用于 HTML 没有什么不同。 SVG 是基于代码的图像，在浏览器根据 SVG 文件的代码呈现时绘制。您可以将文件直接合并到页面中，或将其嵌入。然后，您只需将 JavaScript 应用于 SVG 的元素，就像 HTML.
中的元素一样
首先，进入 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）。只要您有原始文件，编辑它应该没有问题，但没有 "easy" 方法可以做到这一点。 SVG 的优点之一是它完全是一个可编程的图像。当然，能够以视觉方式进行设计固然很好，这就是网页设计师为网站所做的，但如果您想 "really" 使用它，则需要使用代码。
如果这不是您要找的答案，我很抱歉，但我确实希望这有助于解决问题。
我的任务是创建 HTML 表单的交互式可视化版本。
工人对他们在各个领域的熟练程度评分在 1（差）到 5（优秀）之间：
Client Management:
[x] 1 (Poor)
[ ] 2 (OK)
[ ] 3 (Good)
[ ] 4 (Great)
[ ] 5 (Excellent)
然而，不仅仅是使用单选按钮，我们的想法是它们以极坐标网格的形式可视化。
馅饼的每一片代表一个能力领域（例如，与客户合作），每一片片代表用户在这方面的熟练程度。 This is a 3D representation.
用户将能够 select 每个能力领域的一个片段，相当于 1-5，然后最终将其作为表格提交。我首先在 Illustrator 中创建一个 SVG，然后添加 类 以使用 JS/jQuery 对其进行操作。然后我使用这些 类 来填写一组隐藏的单选按钮，这样我就有了一种实际提交数据的方法。
但是，必须有一种更少的 DIY 方式来创建 SVG 并与之交互，这对于可维护性会更好。例如，如果我想添加一个新片段，我将不得不在 Adobe Illustrator 中重新创建图形并将一组新的 类 添加到文件中（以及将旧的重新添加到新的输出）。
从可维护性的角度来看，处理这种交互式 SVG 的最佳方法是什么？
有几个 JavaScript 库可以创建、操作和动画化 SVG。最著名的是 RaphaëlJS (http://raphaeljs.com) and Snap.svg (http://snapsvg.io)。通过 VML 回退，RaphaëlJS 甚至可以在 IE6 等传统浏览器上工作。 Snap.svg 专为现代浏览器设计。
SVG 不是一种表单技术，因此您找不到任何完美的东西。虽然我认为 d3 的任何东西都是 DIY，但这是一个非常不错的用例 (see examples gallery)。
你大概可以用 50 行左右的 d3 代码来完成。也许更少。
正如 Robert 的评论所暗示的那样，这在技术上是使用 DOM 创建 svg，但是使用 d3 是一种比手动创建更好的方法。
我会注意到 d3 之于 svg 几乎就像 jquery 之于 html（它实际上对 html 也很有用，但用例更常见于 svg） .与 jQuery 类似，您几乎可以立即开始使用 d3，但是您投入更多的时间来学习它，"getting it" 您将获得更多的好处。
将 JavaScript 应用于 SVG 与将其应用于 HTML 没有什么不同。 SVG 是基于代码的图像，在浏览器根据 SVG 文件的代码呈现时绘制。您可以将文件直接合并到页面中，或将其嵌入。然后，您只需将 JavaScript 应用于 SVG 的元素，就像 HTML.
中的元素一样首先，进入 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）。只要您有原始文件，编辑它应该没有问题，但没有 "easy" 方法可以做到这一点。 SVG 的优点之一是它完全是一个可编程的图像。当然，能够以视觉方式进行设计固然很好，这就是网页设计师为网站所做的，但如果您想 "really" 使用它，则需要使用代码。
如果这不是您要找的答案，我很抱歉，但我确实希望这有助于解决问题。