如何在 HTML 的图例中指定不同的形状？

Posted 2023-02-16

【中文标题】如何在 HTML 的图例中指定不同的形状？

【英文标题】：How to specify a different shape in a legend in HTML?

【发布时间】：2017-10-22 17:30:21

【问题描述】：

我可以通过使用 html 中的图例指定背景颜色来创建颜色图例。图例中的每个条目都是矩形。

但是，我想在 HTML 中为形状（例如圆形、椭圆、三角形等）创建一个图例，但我没有找到在图例中指定除矩形以外的其他形状的方法。

我想知道是否有办法在 HTML 的图例中指定除矩形以外的其他形状？

任何建议将不胜感激。

非常感谢！

编辑：

使用https://css-tricks.com/examples/ShapesOfCSS/解决

【问题讨论】：

当然，使用 CSS：jsfiddle.net/y58833ms

非常感谢您的建议！

【参考方案1】：

我认为您混淆了术语。 HTML 形状是一个图像映射，带有附加到图像或图形的可点击区域。

https://www.w3schools.com/tags/att_area_shape.asp

通常人们使用 CSS、SVG 或图形图像在 HTML 中创建形状。

您可以使用 CSS 在 HTML 中创建形状，使用属性来表示正方形、圆形、星形和许多其他形状。

https://css-tricks.com/examples/ShapesOfCSS/

另一种选择是 SVG，您可以在其中创建任何形状或动画。 SVG 有一些内置的形状，或者您可以创建自己的形状并根据需要变得复杂。例如，您可以使用 SVG 来创建像 Homer Simpson (http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg) 这样的人物形象

https://www.w3schools.com/graphics/svg_rect.asp

祝你好运。

【讨论】：

非常感谢您的建议！我使用了css-tricks.com/examples/ShapesOfCSS，它可以工作。这真的很有帮助！再次非常感谢！