第 4 章 基本形状

线段

使用 <line> 元素绘制， 参数如下（带不带单位都可以）

• x1：起点 x 坐标
• y1：起点 y 坐标
• x2：终点 x 坐标
• y2：终点 y 坐标

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <line x1="40" y1="20" x2="80" y2="20" style="stroke: black"></line>
    <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black"></line>
    <line x1="30" y1="30" x2="85" y2="85" style="stroke: black"></line>
</svg>

笔画特性

线段可以看作在画布上画出来的笔画。笔画的尺寸、颜色、风格都会影响线段的表现，这些特性都可以在 style 属性中指定

stroke-width

用于设置线条的宽度

由于电脑屏幕是由固定大小的像素组成，某些时候 1 像素的线看起来会像 2 像素，这是因为该线位于两个像素的正中间。可通过 CSS 属性 shape-rendering 的值来控制反锯齿特性

• crispEdges：关闭特性，得到清晰的图像，有时候看起很毛糙
• geometricPrecision：开启特性，使边缘圆滑，有时候看起来很模糊

stroke

用于设置线条颜色，默认值为 none，可通过以下几种方式指定

• 基本的颜色关键字
• 6 位十六进制数字
• 3 位十六进制数字
• rgb
• currentColor 关键字，表示当前元素应用的 CSS 属性的 color 的值

其他 CSS 颜色规范不属于 SVG1.1 规范，可能不被其他 SVG 实现所支持（在浏览器上支持）

stroke-opacity

用于设置线条的不透明度，取值范围为 0.0~1.0

stroke-dasharray

如果需要点线或虚线，则使用该属性，其值由一列数字构成，代表线的长度和空隙的长度，数字之间用逗号或空格分隔，数字的个数应为偶数，如果设置的个数为奇数，则会自动复制一次，用以补齐个数

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <!-- 9 个像素的虚线，5 个像素的空隙 -->
    <line
        x1="10"
        y1="10"
        x2="100"
        y2="10"
        style="stroke-dasharray: 9, 5; stroke: black; stroke-width: 2"
    ></line>

    <!-- 5 个像素的虚线，3 个像素的空隙，9 个像素的虚线，2 个像素的空隙 -->
    <line
        x1="10"
        y1="20"
        x2="100"
        y2="20"
        style="stroke-dasharray: 5, 3, 9, 2; stroke: black; stroke-width: 2"
    ></line>

    <!-- 复制奇数个数，等价于：9, 5, 3, 9, 5, 3 -->
    <line
        x1="10"
        y1="30"
        x2="100"
        y2="30"
        style="stroke-dasharray: 9, 5, 3; stroke: black; stroke-width: 2"
    ></line>
</svg>

矩形

使用 <rect> 元素绘制，参数如下

• x：左上角 x 坐标

• y：左上角 y 坐标

• width：矩形宽度

• height：矩形高度

• 通过 fill 填充颜色，默认使用黑色填充

• 通过 fill-opacity 指定填充不透明度

• 通过 stroke 描边

矩形的边框一半在矩形内一半在矩形外，左上角坐标默认为 (0, 0)

圆角矩形

在矩形参数的基础上，再加两个圆角参数即可得到圆角矩形。如果只指定了其中一个，则默认它们相等

• rx：x 方向的圆角半径，最大值是矩形宽度的一半
• ry：y 方向的圆角半径，最大值是矩形高度的一半

如果通过百分比来指定圆角半径的值，该百分比会被解析为相对视口的宽高的百分比

圆和椭圆

使用 <circle> 元素绘制圆形，参数如下

• cx：圆心 x 坐标
• cy：圆心 y 坐标
• r：半径

使用 <ellipse> 绘制椭圆，参数如下

• cx：圆心 x 坐标
• cy：圆心 y 坐标
• rx：x 方向半径
• ry：y 方向半径

圆和椭圆一样，与矩形一样默认黑色填充无边框，如果省略了 cx 或 cy，则默认为 0

多边形

使用 <polygon> 元素绘制，参数如下

• points：指定一系列的坐标点，使用逗号或空格分隔，无需在最后指定起始坐标，会自动回到起点

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <!-- 平行四边形 -->
    <polygon
        points="15,10 55,10 45,20 5,20"
        style="fill: red; stroke: black"
    ></polygon>
    <!-- 五角星 -->
    <polygon
        points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 
    42.3,60.1 35,55 27.7,60.1 30.3,51.5 
    23.1,46.1 32.1,46.1"
        style="fill: #ccffcc; stroke: green"
    ></polygon>
    <!-- 不规则图形 -->
    <polygon
        points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95"
        style="fill: yellow; fill-opacity: 0.5; stroke: black; stroke-width: 2"
    ></polygon>
</svg>

填充边线交叉的多边形

SVG 中有两种判断某个点是否在多边形中的规则，对应为 fill-rule 属性，取值如下

• nonzero：默认值。在判断某点是否在图形内部时，从这个点画一条线到无穷远，然后计算这条线与图形边线有多少次交叉，如果交叉的边线是从右往左画，则总数加 1，反之减 1，最后总数如果为 0，则认为该点在图形外部，否则在内部
• evenodd：也同样画一条线，但是只计算相交的次数，总数为奇数则在图形内部，否则在外部

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <polygon
        style="fill-rule: nonzero; fill: yellow; stroke: black"
        points="48,16 16,96 96,48 0,48 80,96"
    />
    <polygon
        style="fill-rule: evenodd; fill: #00ff00; stroke: black"
        points="148,16 116,96 196,48 100,48 180,96"
    />
</svg>

折线

使用 <polyline> 元素绘制，它与 <polygon> 相同，唯一区别在于它绘制的图形不封闭

在使用时最好将 fill 属性设置为 none，否则 SVG 阅读器会尝试去填充形状，进而产生意外的效果

线帽和线连接

当使用 <line> 或 <polyline> 画线时，可以使用 stroke-linecap 指定不同的值来确定线的头尾形状，取值如下

• butt：默认值。无突出，精确地与起止位置对齐
• round：圆角突出
• square：直角突出

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <line
        x1="10"
        y1="15"
        x2="50"
        y2="15"
        style="stroke: black; stroke-linecap: butt; stroke-width: 15"
    />
    <line
        x1="10"
        y1="45"
        x2="50"
        y2="45"
        style="stroke: black; stroke-linecap: round; stroke-width: 15"
    />
    <line
        x1="10"
        y1="75"
        x2="50"
        y2="75"
        style="stroke: black; stroke-linecap: square; stroke-width: 15"
    />

    <!-- 灰色竖线 -->
    <line x1="10" y1="0" x2="10" y2="100" style="stroke: #999" />
    <line x1="50" y1="0" x2="50" y2="100" style="stroke: #999" />
</svg>

可以使用 strole-linejoin 指定线段在图形棱角交叉时的效果，取值如下

• miter：尖
• round：圆
• bevel：平

<!-- @format -->

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
    <polyline
        style="
            stroke-linejoin: miter;
            stroke: black;
            stroke-width: 12;
            fill: none;
        "
        points="30 30, 45 15, 60 30"
    />
    <polyline
        style="
            stroke-linejoin: round;
            stroke: black;
            stroke-width: 12;
            fill: none;
        "
        points="90 30, 105 15, 120 30"
    />
    <polyline
        style="
            stroke-linejoin: bevel;
            stroke-width: 12;
            stroke: black;
            fill: none;
        "
        points="150 30, 165 15, 180 30"
    />
</svg>

基本形状总结

形状元素

形状	描述
<line x1="" y1="" x2="" y2="" />	从起始点画一条线到终点
<rect x="" y="" width="" height="" />	画一个矩形
<circle cx="" cy="" r="" />	画一个圆
<ellipse cx="" cy="" rx="" ry="" />	画一个椭圆
<polygon points="" />	画一个封闭图形
<polyline points="" />	画一系列相连的折线

当指定属性不带单位时，默认以用户坐标为准（除了 points 不能带单位）

指定颜色

可通过以下几种方式指定填充或轮廓的颜色

• none，无颜色
• 基本颜色名称
• SVG 规范中规定的扩展颜色名称
• 6 位十六进制数字
• 3 位十六进制数字
• rgb
• currentColor 关键字
• CSS3 颜色模块规范规定的其他方法（可能不被所有 SVG 实现支持）

笔画特性

属性	值
stroke	颜色，默认值为 none
stroke-width	宽度，默认值为 1。可用用户坐标或指定单位的方式指定，相对坐标网格线剧中
stroke-opacity	不透明度，默认值为 1.0
stroke-dasharray	指定序言和间隙的长度，默认值为 none。只能使用用户坐标
stroke-linecap	线头尾的形状，默认值为 butt。可选 round、square
stroke-linejoin	图形的棱角或一系列连线的交点处的形状，默认值为 miter。可选 round、bevel
stroke-miterlimit	相交处显示宽度与线宽的最大比例，默认值为 4

填充特性

属性	值
fill	填充颜色，默认值为 black
fill-opacity	填充不透明度，默认值为 1.0
fill-rule	判断某个点是否在图形内部，默认值为 nonzero，可选 evenodd