SVG图像绘制多边形

来源：互联网发布：枪神纪刷枪软件手机版编辑：程序博客网时间：2024/05/22 03:37

在线演示

图一为初始状态；图二是鼠标滑过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>

0 0