银商小程序

折线

使用时包含在<svg>标签内

<polyline>标签用来创建仅包含直线的形状

属性

属性名 类型 默认值 说明
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">
      <text class="desc">The polyline element is an SVG basic shape that creates straight lines connecting several points.</text>
      <div class="item">
        <svg class="item-shape">
          <polyline points="0,0 500,0 500,400" fill="#ea6153"></polyline>
        </svg>
        <text class="desc">a simple polyline componnet</text>
      </div>
      <div class="item">
        <svg class="item-shape">
          <polyline points="300,40 450,200 150,200 300,40" stroke="#ea6153" fill="none" stroke-width="4"></polyline>
          <polyline points="150,100 450,100 300,260 150,100" stroke="#ea6153" fill="none" stroke-width="4"></polyline>
        </svg>
    </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>

效果展示

← 路径 →