SVG orient 属性介绍

SVG（Scalable Vector Graphics），是一种使用 XML（Extensible Markup Language）标记语言定义可缩放矢量图形的图像格式。它可以通过使用简单的格式来绘制简单到复杂的图形，并且可以在不失真的情况下扩大或缩小。

orient 属性用于定义某种曲线的方向，例如沿着路径的箭头。当使用该属性时，SVG通常会自动计算箭头形状和朝向。

语法

orient 属性的语法如下：

<marker orient="auto|angle|[auto <angle>]">

• auto：自动计算箭头方向。
• angle：指定箭头方向的绝对角度。
• [auto <angle>]：指定偏转量的绝对角度。

属性值

• auto：自动计算箭头方向。
• angle：指定箭头方向的绝对角度。0度表示箭头沿着路径向右，90度表示箭头沿着路径向下，180度表示箭头沿着路径向左，270度表示箭头沿着路径向上。
• [auto <angle>]：指定偏转量的绝对角度。

实例

下面是一个使用 orient 属性的示例：

<svg width="100" height="100">
  <path d="M 10 50 L 90 50"
        stroke="black"
        stroke-width="5"
        marker-end="url(#end-arrow)"/>
  <marker id="end-arrow"
          orient="auto"
          markerWidth="10"
          markerHeight="10"
          refX="0.1"
          refY="3">
    <path d="M0,0 L0,6 L9,3 z" fill="black" />
  </marker>
</svg>

这里，我们在路径的末尾使用了 marker-end 属性来定义一个箭头。orient 属性被设置为 auto，表示箭头朝向将自动根据路径的方向计算。

总结

本文介绍了 SVG orient 属性的用法和语法。通过设置 orient 属性，可以方便地定义路径上的箭头方向。这对于路径上的标记和指示非常有用，例如在地图上标记路线和指示方向等。