Luc*_*s C 7 html css browser performance svg
我正在写一个web应用程序这使得一个图形保存〜700个节点和它们各自的边缘。每个节点都显示为一个圆圈，其中包含一个文本块、一个背景图像以及其他内容。图形是交互式的，用户可以缩放和平移图形。因此，平滑和高性能是必要的。
假设图形是用 SVG 呈现的。考虑到每个节点都包含丰富的类似 HTML 的内容，更容易在 a 中使用 HTML/CSS 来构建和设置节点样式，div并将其作为foreignObject 包含在图形中。但是，使用此方法在移动设备上使用该应用程序时，性能会明显下降。在现代浏览器上，如果节点完全在 SVG 中构建，您会期望显着提高性能吗？
在这个特定的情况下，使用HTML为每个节点包括使用的div文本，以及类似的CSS属性width，height，border，background-image，border-radius，和flex。使用纯 SVG 实现起来会更复杂，但会包含像rect和 等元素pattern以及相应的 SVG 样式属性。
小智 0
这实际上取决于形状的复杂性、图形的大小以及您想要投入的时间。具有 700 个节点和数千条边的图确实是一件很重的事情。我建议您制作一个小型版本的图表（可能有 10-15 个节点）并比较 HTML+SVG 和仅 SVG 之间的性能。
问题是，仅使用 SVG 会非常繁重且性能不佳。我想这两种方式都会很重。您是否考虑过使用其他工具？
我不久前使用这个网站为网站制作了流程图，效果非常好。
希望能帮助到你。