SVG画箭头；文本旋转；文本沿线路径走

SVG画箭头

像箭头这样特殊的元素，可以在一个地方定义，然后在另一个地方引用

<marker>元素

标记可以放在直线，折线，多边形和路径的顶点。这些元素可以使用maeker属性的"maeker-start"，"maeker-mid"和"maeker-end"，继承默认情况下或可设置为"none"或定义的标记的URI。您必须先定义标记，然后才可以通过其URI引用。任何一种形状，可以把标记放在里面。他们绘制元素时把它们附加到顶部

使用<marker>元素创建一个marker，以及其相关属性。通常我们把marker放在<defs>元素中，然后在其它地方对其进行引用

<defs>
          <marker id="triangle" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
              <path d="M 0 0 L 20 10 L0 20 z" fill="red" stroke="blue"/>
          </marker>
      </defs>
      <line x1="10" y1="70" x2="220" y2="190" stroke="#967adc" stroke-width="2" marker-end="url(#triangle)"/>
      <line x1="10" y1="110" x2="220" y2="230" stroke="#39f" stroke-width="2" marker-start="url(#triangle)"/>
      <line x1="10" y1="150" x2="220" y2="270" stroke="#45d7d6" stroke-width="2" marker-mid="url(#triangle)"/>

marker-mid属性设置在当polyline、path和polygon转换方向的位置点。而line没有中间没有转换方向的位置点，所以箭头未引用进去

markerWidth和markerHeight性定义了marker视窗的宽度和高度。marker在自己的视窗中展示，所以这个尺寸必须至少大于marker标签内定义的图形（除非你是要隐藏图形的某部分） 上面的实例中我把markerWidth和markerHeight都设置为10px。path中绘制出的三角形需要适应9px x 6px的面积，所以我也可以把markerWidth设置为9，然互markerHeight设置为6。这是marker可以接受的最小尺寸，任何小于这个的尺寸都会导致图形被裁剪。

接下来的两个属性，refX和refY，指的是图形元素和marker连接的位置坐标。我们还给背后的场景应用了一个变换，来移动marker，与之对齐。

在实例中，我把三角形向上移动，通过把refY的值设置为3。将点(0,3)作为和图形元素连接的点。

下一个属性，orient，这个属性是我为什么在转换line的方向时，不需要调整marker的原因。它接受一个auto值，或者一个角度值，这个值决定了marker是否要旋转，在与其它内容连接的时候。

auto这个值表示marker会随着应用的元素一起旋转。45deg这个值则表示marker的方向一直保持45deg，不会随着连接的元素一起旋转。大多数时候这个值都是设置为auto的。

为了作对比，我们这里第二个示例设置了orient等于45deg。注意两个实例中的箭头都旋转了相同的角度。在第二个实例中它甚至被SVG视窗裁剪了，也就是它超出边框了。 markerUNits，用于确定marker是否进行缩放。它定义了markerWidth和markerHeight，以及marker的内容本身的坐标系统。

它接受两个值，strokeWidth和userSpaceOnUse。默认值是strokeWidth，这也是大家大多数情况下会设置的值，因为它允许你的marker随着它连接的line进行缩放。

strokeWidth:坐标系统中的marker值和当前描边宽度的单位是相同的尺寸。也就是说strokeWidth这个值允许你的marker缩放。

userSpaceOnUse: marker的值是当前用户坐标系统的值。也就是说如果你的marker是一个半径为10px的圆，它就一直都是10px的半径，不受连接的元素的影响。

markerUNits，用于确定marker是否进行缩放。它定义了markerWidth和markerHeight，以及marker的内容本身的坐标系统。

它接受两个值，strokeWidth和userSpaceOnUse。默认值是strokeWidth，这也是大家大多数情况下会设置的值，因为它允许你的marker随着它连接的line进行缩放。

strokeWidth:坐标系统中的marker值和当前描边宽度的单位是相同的尺寸。也就是说strokeWidth这个值允许你的marker缩放。

userSpaceOnUse: marker的值是当前用户坐标系统的值。也就是说如果你的marker是一个半径为10px的圆，它就一直都是10px的半径，不受连接的元素的影响。 给<symbol>元素添加viewBox也是同样的道理，symbol中的所有内容都会继承这个效果。 这里我所有引用marker的实例都是用的同一种方法，设置id然后赋给marker-end属性。marker-end属性是marker的一个属性，表示在哪里连接marker。

marker-end="url(#arrow)" 给line、path、polyline、polygon这些基础图形应用marker一共有四种方法：

- marker-start=”url(#marker-id)”
- marker-mid=”url(#marker-id)”
- marker-end=”url(#marker-id)”
- marker=”url(#marker-id)”

marker-mid属性设置在当polyline、path和polygon转换方向的位置点。

注意：你还可以在你的CSS中这样设置marker-end: url("#arrow");

SVG文本

<text>用来定义文字文本

SVG文本引用<tref>

提示：新版的svg中已经将<tref>这个标记删除，你可以使用<use>标记替代它。

文本路径<textPath>

在SVG里，处理能沿直线方向写文字外，还能够使用<path>先定义一条路径，让文字沿着定义好的路径排列。textPath标记的作用就是放在<text>标记内部引用预定义的<path>，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID

<svg width="800" height="800" >
        <defs>
            <path id="textPath" d="M 50 50 C 100 200 120 20 300 120"/>
        </defs>
        <use xlink:href="#textPath" fill="none" stroke="red"  />
        <text font-family="Verdana" font-size="14">
            <textPath xlink:href="#textPath">
            我是文字，我会沿着线的路径走，一直走
            </textPath>
         </text>
    </svg>

可以使用marker引用文本

在图形中间引用文本，图形中间要有坐标显示

<svg width="800" height="800" >
    <marker id="idtext" viewBox="0 0 120 50" refX="0" refY="0" markerUnits="strokeWidth" markerWidth="120" markerHeight="20"         orient="auto">
      <text  font-family="Verdana" font-size="14"  x="20" y="13">我在线上被引用
       </text>
     </marker>
    </defs>
    <g>
       <path d="M10 100 L105 100 L300 100"  stroke="#45d7d6"  stroke-width="3" fill="none" marker-mid="url(#idtext)" />
       <path d="M10 200 L105 200 L300 200"  stroke="#45d7d6"  stroke-width="3" fill="none" marker-end="url(#idtext)" />
       <path d="M10 300 L105 300 L300 300"  stroke="#45d7d6"  stroke-width="3" fill="none" marker-start="url(#idtext)" />
    </g>
</svg>

此外，想让文字旋转，text元素中加transform

<svg height="800" width="800">
      <text x="0" y="15" fill="#45d7d6">我没有倾斜</text>
    <text x="20" y="30" fill="#45d7d6"
    transform="rotate(30 20,40)">我是倾斜了</text>
    </svg>

rotate里的三个值分别对应旋转角度，旋转的中心点。中心点参数缺省默认为圆点（0,0）。