学习笔记——SVG-line标签及其外观轮廓属性

SVG标签也属于html标签，所以标签属性可以使用class、id、style等标签公共的属性。除此之外，SVG标签可能还具有专业属性。

x1、y1、x2、y2属性是line标签的专有属性，表示起(x1, y1)止(x2, y2)点坐标

---

一、代码

<div class="wrapper">
    <h4>stroke属性：定义一条线，文本或元素轮廓颜色</h4>
    <svg id="svg" width="80" height="80" style="border: 1px solid;">
      <line x1="10" y1="10" x2="70" y2="70" stroke="red"></line>
    </svg>
  </div>
  <div class="wrapper">
    <h4>stroke-width属性：定义了一条线，文本或元素轮廓厚度</h4>
    <svg id="svg" width="80" height="80" style="border: 1px solid;">
      <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="10"></line>
    </svg>
  </div>
  <div class="wrapper">
    <h4>stroke-linecap属性：定义不同类型的开放路径的终结</h4>
    <div class="item">
      <h6>属性值：butt（默认值），以直边结束线段</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="10" stroke-linecap="butt"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：round，以圆角结束线段，圆角的半径由stroke-width（轮廓宽度）控制的</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="10" stroke-linecap="round"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：square，也是以直边结束线段，但和butt不同的是会在结束位置多出一段由stroke-width（轮廓宽度）大小控制的长度</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="10" stroke-linecap="square"></line>
      </svg>
    </div>
  </div>
  <div class="wrapper">
    <h4>stroke-dasharray属性：可控制用来描边的点划线的图案范式</h4>
    <div class="item">
      <h6>属性值：奇数为实线宽度，偶数为空白宽度（当前为两个值）</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="2" stroke-linecap="butt"
          stroke-dasharray="5, 10"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：三个值</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="2" stroke-linecap="butt"
          stroke-dasharray="5, 10, 8">
        </line>
      </svg>
    </div>
  </div>
  <div class="wrapper">
    <h4>stroke-dashoffset属性：用于指定路径开始的距离，相对于x轴偏移，正则向左偏移。负则向右偏移</h4>
    <div class="item">
      <h6>属性值：正值（默认值为1）</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="4" stroke-dasharray="5,7,10"
          stroke-dashoffset="1">
        </line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：负值（-1）</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="4" stroke-dasharray="5,7,10"
          stroke-dashoffset="-7">
        </line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：百分比（10%）代表了当前 viewport 的一个百分比</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="4" stroke-dasharray="5,7,10"
          stroke-dashoffset="10%">
        </line>
      </svg>
    </div>
  </div>
  <div class="wrapper">
    <h4>stroke-opacity属性：定义一条线，文本或元素轮廓的透明度（0-1）</h4>
    <svg id="svg" width="80" height="80" style="border: 1px solid;">
      <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" stroke-opacity="0.2"></line>
    </svg>
  </div>
  <div class="wrapper">
    <h4>transform属性：定义平移、缩放、旋转、倾斜等规则</h4>
    <div class="item">
      <h6>属性值：translate(x, y)规则与CSS相同</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform="translate(10, 10)"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：scale(x, y)规则与CSS相同</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform="scale(0.5)"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：skewX(value)、skewY(value)需要分开设置</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform="skewX(40) skewY(40)"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：rotate(deg)规则与CSS相同</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform="rotate(30)"></line>
      </svg>
    </div>
  </div>
  <div class="wrapper">
    <h4>transform-origin属性：设置元素中心点</h4>
    <div class="item">
      <h6>属性值：0 0</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform-origin="0 0"
          transform="rotate(20)"></line>
      </svg>
    </div>
    <div class="item">
      <h6>属性值：0 10</h6>
      <svg id="svg" width="80" height="80" style="border: 1px solid;">
        <line x1="10" y1="10" x2="70" y2="70" stroke="red" stroke-width="6" transform-origin="0 50"
          transform="rotate(20)"></line>
      </svg>
    </div>
  </div>

二、示例

视频讲解https://www.bilibili.com/video/BV1qh4y1n7bQ/?vd_source=be4efb0f2cfe5e83a1774731474196fd​​​​​​​