SVG样式：填充与描边

发表于 更新于 分类于 ， ， ， 阅读次数：

本篇介绍 SVG 样式中的基础能力：fill、stroke等通用属性。

一、填充 fill/stroke

  • fill：设置对象内部的颜色
  • fill-opacity： 控制填充色的透明度
  • stroke：设置设置绘制对象的线条的颜色
  • stroke-opacity： 控制描边的透明度
  • 示例：
1
2
3
4
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
    fill-opacity="0.5" stroke-opacity="0.8"/>
</svg>
  • 成品展示：

二、描边

  • stroke-width：定义了描边的宽度。注意，描边是以路径为中心线绘制的

  • stroke-linecap：控制描边终点的形状

    • butt 用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点
    • square 类似butt，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制
    • round 表示描边的终点是圆角，圆角的半径也是由stroke-width控制的

  • stroke-linejoin: 控制两条描边线段之间，用什么方式连接

    • miter 默认值，表示用方形画笔在连接处形成尖角
    • round 用圆角连接，实现平滑效果
    • bevel 连接处会形成一个斜接

  • stroke-dasharray: 将虚线类型应用在描边上，值为一组用逗号分割的数字组成的数列。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度，通过重复这些数字来实现虚实分割

  • 示例：

    • 描边终点形状
    1
    2
    3
    4
    5
    <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg">
      <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
      <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
      <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
    </svg>
  • 描边连接方式
1
2
3
4
5
6
7
8
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
  • 描边虚线
1
2
3
4
5
6
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>