📌  相关文章
📜  如何在 HTML5 中指定区域的形状?

📅  最后修改于: 2021-11-10 06:11:53             🧑  作者: Mango

在本文中,我们将学习 HTML 区域标签的 shape 属性以及如何在 HTML5 中使用它来指定区域的形状。

我们使用area 元素的 shape属性来指定形状,并且可以与coords属性配对来指定区域的形状、大小和位置。

句法:

alternate text

形状属性值及其功能和坐标属性:

  • default:用于在 HTML 中指定一个区域的整个区域。
    坐标:它没有坐标,因为它跨越了整个区域。
  • rect:用于定义矩形区域。
    坐标:
    • x 1 , y 1为左上角。
    • x 2 , y 2为右下角。
  • circle:用于定义圆形区域。
    坐标:
    • x, y 为圆心。
    • rad 为圆的半径。
  • poly:用于定义多边形区域。
    坐标:
    • x 1 , y 1 , x 2 , y 2 … x n , y n表示多边形的边。

注意:如果第一个和最后一个坐标对不同,最后一个坐标对将用于闭合多边形。

以上内容以表格形式总结如下:

Functionality Attribute Value Coords
To specify the entire region. default (defines the entire region)
To define a rectangular region. rect

x1, y1, x2,  y2 – first 2 for top-left

The next two for the bottom-right corner of

rectangle

To define a circular region. circle

x, y, rad – first two coordinates of the center of

circle and the last the radius.

To define a polygonal region. poly

x1, y1, x2, y2, …, xn, yn – coordinates of the edges of the polygon.

In case the first and last coordinate pairs are different, the last coordinate

pair will be used to close the polygon.

下面是几个例子来说明这个属性

示例 1:

index.html


  
    
    
      
  
      
    
  


index2.html


  
    
           
                                


输出:这里,图片的矩形部分链接到GeeksForGeeks的官方页面,多边形部分被geeks for geeks映射到DSA课程。单击任一将引导用户到与形状相关联的特定链接。我们根据我们选择的图像设置特定形状的坐标。

这是一个简短的 gif,用于演示上述示例的功能。

示例 2:

索引2.html



  
    
           
                                

输出:这里,我们有一个圆和一个正方形(即使为此,我们也使用 rect 作为属性值)。