SVG描边

SVG（Scalable Vector Graphics）是一种基于 XML 的图像格式，可以用于创建矢量图形。SVG 具有很多的特点，例如：

• 矢量图形，可以随意缩放不失真
• 支持填充和描边
• 支持动画和事件
• 基于 XML 标准，可以很方便地与其他标准集成

这篇文章将讨论 SVG 描边的相关内容。

描边属性

SVG 中，使用 stroke 属性定义描边样式。它有以下几种子属性：

• stroke-width：定义描边粗细的值
• stroke-linecap：定义描边线条的端点样式，有三个可选值：butt（默认值）、round 和 square
• stroke-linejoin：定义描边线条的拐角样式，有三个可选值：miter（默认值）、round 和 bevel
• stroke-dasharray：定义描边线条的虚线样式。它需要一个数字数组作为参数，其中偶数索引表示实线的长度，奇数索引表示空白的长度。

描边例子

下面是一个例子：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80"
    stroke="blue" stroke-width="4" />
</svg>

这个例子创建了一个 100px × 100px 的 SVG 元素，并在其中绘制了一个 80px × 80px 大小的蓝色长方形，边框宽度为 4px。

带箭头的直线

<svg width="100" height="100">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10"
      refX="8" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="90" y2="90"
    stroke-width="4" stroke="black"
    marker-start="url(#arrow)"  marker-end="url(#arrow)" />
</svg>

这个例子创建了一个带箭头的直线，箭头通过 <marker> 元素定义。markerWidth 和 markerHeight 属性定义了箭头的宽度和高度，refX 和 refY 属性定义箭头的基准位置，orient 属性定义了箭头的方向。marker-start 和 marker-end 属性分别指定了起点和终点的箭头。

实体线条和虚线组合

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="10"
    stroke-width="2" stroke="black"
    stroke-dasharray="5,5" />
  <line x1="10" y1="30" x2="90" y2="30"
    stroke-width="2" stroke="black" />
</svg>

这个例子创建了两条横线，第一条使用虚线，第二条使用实线。通过 stroke-dasharray 属性定义了虚线的样式，数组的偶数索引表示实线的长度，奇数索引表示空白的长度。

总结

SVG 的描边功能非常强大，能够满足各种各样的需求。本文介绍了描边的基本属性和一些例子，希望对你有所帮助。