多边形
使用时包含在<svg>标签内
<polygon>标签用来创建含有不少于三个边的图形
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| points | 0 | 多边形各个角的坐标(x1,y1,x2,y2,x3,y3) | |
| fill | black | 填充的颜色 | |
| stroke | transparent | 边框填充的颜色 | |
| stroke-width | 0 | 线边框的宽度 |
代码展示
<template>
<div class="page">
<navbar back="true" title="polyline and polygon"></navbar>
<scroller class="main">
<div class="item">
<svg class="item-shape">
<polygon points="0,30 50,0 70,30 70,60 50,80 0,60" fill="#ea6153" />
</svg>
<text class="desc">a simple polygon componnet </text>
</div>
<div class="item">
<svg class="item-shape">
<polygon points="300,40 450,200 150,200" fill="#9b59b6" />
<polyline points="150,100 450,100 300,260 150,100" fill="#2ecc71"></polyline>
</svg>
<text class="desc">As the some to polyline ,the points attribute defines a list of points required to draw a polyline or polygon component</text>
</div>
</scroller>
</div>
</template>
<style>
.page{
flex: 1;
padding-top: 20px;
background-color: #fff;
}
.main{
padding-top: 88px;
}
.desc{
margin: 20px;
font-size: 28px;
text-align: left;
color: #444;
}
.item{
align-items: center;
margin: 20px;
padding: 10px;
border-bottom: 2px solid #ddd;
}
.item-shape{
width: 600px;
height: 480px;
}
</style>
<script>
import navbar from '../include/navbar.vue';
module.exports = {
components: {
navbar
},
};
</script>
效果展示
