SVG图像绘制多边形

最新推荐文章于 2025-05-13 14:46:25 发布

原创最新推荐文章于 2025-05-13 14:46:25 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

css3 同时被 3 个专栏收录

35 篇文章

订阅专栏

html5+css3

20 篇文章

订阅专栏

svg

1 篇文章

订阅专栏

这篇博客介绍了如何使用SVG来绘制一个多边形，并通过CSS实现鼠标悬停时图形上移的效果。示例中展示了初始状态的四边形以及鼠标悬停后上移30px的状态。文章详细解析了SVG的polygon元素以及顶点坐标设置，帮助读者理解SVG图形的绘制和动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示

图一为初始状态；图二是鼠标滑过SVG图形上移30px；

这里写图片描述
html：

<div id="sec">
    <div id="sec-description">
        <h1>Hello</h1>
        <p>If you...pain. </p>
    </div>
    <svg width="200px" height="500px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,200,0,200,350,0,250"></polygon>
    </svg>
</div>

css：

#sec {
    background: url(images/07.jpg);
    width: 200px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#sec-description {
    position: absolute;
    color: #fff;
    box-sizing: border-box;
    padding: 0 30px;            
    z-index: 20;    
}
h1 {
    font-style: 48px;   
}
p {
    font-style: 14px;   
}
#polygon {
    fill: #34495e;/*修改多变形的背景颜色为深蓝绿色*/
    stroke-width: 0;/*去除多边形的边框*/
}

解析：
使用SVG绘制了一个宽度为200px的polygon多边形，在该多边形中定义了四个顶点坐标，分别为（0，0）、（200，0）、（200，350）和（0，250），依次以逗号分隔，形成了一个底边带有斜角的四边形。

上图二鼠标放上，css样式代码

#sec {
    background: url(images/07.jpg);
    width: 200px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#sec-description {
    position: absolute;
    color: #fff;
    box-sizing: border-box;
    padding: 0 30px;            
    z-index: 20;
    -webkit-transform-style: preserve-3d;/*解决闪动问题*/
}
h1 {
    font-style: 48px;
    -webkit-backface-visibility:  hidden;/*解决闪动问题*/
}
p {
    font-style: 14px;
    -webkit-backface-visibility:  hidden;/*解决闪动问题*/
}
#polygon {
    fill: #34495e;/*修改多变形的背景颜色为深蓝绿色*/
    stroke-width: 0;/*去除多边形的边框*/
}
/*动画效果*/        
#sec  svg { 
    transform: all .5s;     
    -webkit-transform: all .5s;         
}
#sec:hover svg {
    opacity: 0.6;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
}

下图为SVG绘制的斜角四边形：
这里写图片描述
第二张多边形：

<div id="sec">      
    <svg width="200px" height="500px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,200,0,200,350,100,350,0,250"></polygon>
    </svg>
</div>

第三张多边形：

<div id="sec">      
    <svg width="300px" height="300px">
        <polygon fill="white" stroke="blue" id="polygon" points="0,0,300,0,300,250,250,300,50,300,0,250"></polygon>
    </svg>
</div>