HTML 页面上带有文本的交互式形状答案

【问题标题】：Interactive shapes with text on HTML pageHTML 页面上带有文本的交互式形状
【发布时间】：2018-07-14 22:21:59
【问题描述】：

所以我的任务是做一个项目。所以让我先展示一些东西。

在这个。紫色形状仅应在单击 Durable Returns 部分时出现。

现在我正在绘制空白，并提出如何做到这一点的想法。我想问的是是否有可能以交互方式在 html 中重新创建所有这些。

【问题讨论】：

如果我们考虑您添加的标签，肯定可以做到这一点.. 我很确定您看到的比这更复杂，不是吗？
为什么有人反对这个问题？它清晰简洁，有一个具体的问题，并提供了足够的信息。
@Brad 也许是因为它是基于意见的......最佳方法 = 意见
@TemaniAfif 对于任何真正阅读过这个问题的人，他们会发现它根本不是基于意见的。只有两种方法可以做到这一点（SVG 和 Canvas），而 Canvas 是完全错误的答案。
@Brad 抱歉，但我不同意只有两种方法 :) .. 如果我们愿意，我们也可以使用纯 CSS/HTML 来做到这一点。使用画布、使用 SVG、使用依赖于此的 JS 库等

【解决方案1】：

SVG 是你真正想要的。

SVG 有一个包含不同元素的 DOM，允许您拥有多边形并且可以任意放置。您也可以嵌入文本并根据需要进行布局。浏览器内的 SVG 可以编写脚本，也可以应用 CSS。

【讨论】：