svg标记marker，给端点加上箭头，或者小圆点，菱形等标记应该怎么做呢？

前端姑娘

已于 2024-04-21 16:14:19 修改

阅读量787

点赞数 17

分类专栏：技术宝库文章标签：前端 javascript

于 2024-03-11 10:52:42 首次发布

本文链接：https://blog.csdn.net/qq_21280835/article/details/136617525

版权

技术宝库专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如果我想给一条路径的两个端点加上箭头（三角形），或者小圆点，菱形等标记应该怎么做呢？
在线DOME预览
标记是markerSVG中一个比较重要的概念，它能贴附于<path>、<line>、<polyline>、<polygon>元素上。最常用的应用就是给线段添加箭头。标记写在 defs中可用于定义可重复利用的图形元素。
标记 marker的各属性和意义:
viewBox: 坐标系的区域
refX,refY: 在viewBox内的基准点，绘制时此点在要贴附的直线端点上
markerUnits: 标记大小的基准，有两个值，即strokeWidth(线的宽度)和uesrSpaceOnUse(线前端的大小)
markerWidth,markerHeight:标记的大小。
orient: 绘制的方向，可设为auto(自动确认方向)和角度值
id: 标识的id号
设置位置的属性如下：
marker-start: 路径的起点处
marker-mid: 路径的中间端点处(直线只有起点和终点，所以对直线无用)
marker-end: 路径的终点处
大家请看下面的例子：

<html>
<head>
  
</head>
<body>
  <svg>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
    </marker>

    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
    </marker>
</defs>

<path d="M100,10 L150,10 L150,60"
      style="stroke: green; stroke-width: 1px; fill: none;
                   marker-start: url(#markerCircle);
                   marker-end: url(#markerArrow);
                 "

        />
  </svg>
</body>
</html>

在中需要路标的尺寸和形状定义好，例如，下面的代码是定义一个圆形路标：

 <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
    </marker>

代表路标，id为改路标的标识，

markerWidth和markerHeight为路标所在视窗坐标系的横轴与纵轴最大的刻度值。

视窗坐标系的原点在屏幕左上角，横轴正方向向右，纵轴正方向向下。

在SVG中需要在一个矩形视窗坐标系(viewport)中画路标，视窗坐标系的原点在屏幕左上角。

refX和refY定义将视窗中的哪个点作为锚点（在上面的例子以圆心为锚点）来挂在线段的端点上，如下图

下面的代码是画一个箭头作为锚点

<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
    </marker>

示意图如下

在上面的代码中orient="auto"是指箭头方向随着路径的方向而自动变化

orient的值也可以用户自己定义

在里定义好路标后，我们就可以在路径的起点和终点把路标加上，代码如下：

<path d="M100,10 L150,10 L150,60"
      style="stroke: green; stroke-width: 1px; fill: none;
                   marker-start: url(#markerCircle);
                   marker-end: url(#markerArrow);
                 "

        />

在内联样式表style中，

marker-start指定路径的起点所采用的路标，url(#markerCircle)对应着前面那个id=markerCircle的路标

marker-end指定路径的终点所采用的路标，url(#markerArrow)对应着前面那个id=markerArrow的路标

除了可以通过marker-start来指定路径起点的路标样式，marker-end来指定路径终点的路标样式外，还可以

通过marker-mid属性来指定路径中间所有节点的路标样式。例子如下：

<SVG>
  <defs>
  <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
          orient="auto">
      <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:black;"/>
  </marker>

  <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7"
          orient="auto">
      <path d="M2,2 L2,13 L8,7 L2,2" style="fill: black;" />
  </marker>
</defs>

<path d="M100,20 l50,0 l0,50 l50,0"
      style="stroke: blue; stroke-width: 1px; fill: none;
                   marker-start: url(#markerSquare);
                   marker-mid: url(#markerSquare);
                   marker-end: url(#markerArrow);

                 "
        />
  </SVG>

在这段代码中首先在元素里面画出两个路标，一个是正方形(markerSquare)，另一个是箭头(markerArrow)

然后在path中marker-start指定开始路标为矩形，marker-mid指定中间路标为矩形，marker-end指定终点路标为箭头。

前端姑娘

关注

17
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
svg标记marker，给端点加上箭头，或者小圆点，菱形等标记应该怎么做呢？

如果想给一条路径的两个端点加上箭头（三角形），或者小圆点，菱形等标记应该怎么做呢？标记是markerSVG中一个比较重要的概念，它能贴附于、、、元素上。最常用的应用就是给线段添加箭头。标记写在 defs中可用于定义可重复利用的图形元素。
复制链接

扫一扫