一篇文章带你了解SVG marker 标记

SVG标签用于标签行或路径的开始、中间和结尾。例如，可以用圆或正方形标签路径的起点，用箭头标签路径的终点。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、虚拟主机、营销软件、网站建设、抚州网站维护、网站推广。

marker元素定义了在特定的 元素、 元素、 元素或者 元素上绘制的箭头或者多边标签图形。

一、Marker 简单案例

标记是使用元素创建的。

元素必须嵌套在一个元素内。元素通常为SVG图像保留一组可重复使用的定义。

例

注：

其中包含两个 元素的元素。

这两个元素定义了上图中显示的开始和结束标记。其次，注意元素如何使用mark-start和marker-end CSS属性从其style属性内引用两个元素。这就是为给定路径指定要使用的标记的方式。

二、常见的标记

1. 定义标记

可以使用元素定义标记。

例:

2. 自动定向

定义了用作路径箭头的三角形。

例

 
 
 
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
  
  
  
  
                      marker-start: url(#markerSquare); 
  
  
  
  
                      marker-end: url(#markerArrow); 
  
  
  
  
                      marker-mid: url(#markerSquare); 
  
  
  
  
                    "> 
  
  
  
  
 
  
  
  
  
  
  
  
  
                      marker-start: url(#markerSquare); /* 开始点 */ 
  
  
  
  
                      marker-end: url(#markerArrow);   /* 中间点 */ 
  
  
  
  
                      marker-mid: url(#markerSquare); /*结束点 */ 
  
  
  
  
                    "> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
  
  
  
  
                      marker-start: url(#markerSquare); 
  
  
  
  
                      marker-end: url(#markerArrow); 
  
  
  
  
                      marker-mid: url(#markerSquare); 
  
  
  
  
                    "> 
  
  
  
  
 
  
  
  
  
  
  
  
  
                      marker-start: url(#markerSquare); 
  
  
  
  
                      marker-end: url(#markerArrow); 
  
  
  
  
                      marker-mid: url(#markerSquare); 
  
  
  
  
                    "> 
  
  
  
  
 
  
  
  
  
  
  
  
  
                      marker-start: url(#markerSquare);  
  
  
  
  
                      marker-end: url(#markerArrow); 
  
  
  
  
                      marker-mid: url(#markerSquare); 
  
  
  
  
                    "> 
  
  
  
  
 
  
  
  
  
 
 
 
 

下面的图像 :

显示了具有不同坡度的五条线，它们都使用相同的两个标记作为开始标记和结束标记。请注意，标记如何自动旋转以适应使用它们的直线的坡度。

运行效果：

代码解析

元素中的将绘制一个尖端指向右侧的三角形。但是，如果路径不是水平线，则需要旋转三角形，使其适合使用它的路径的方向。

可以通过将“方向”(orient)属性设定为“自动”(auto)来执行此操作。它将旋转元素内的形状以适合引用它的路径。

这是将元素中的orient属性设置为auto的结果。也可以将orient属性的值设定为固定的度数(例如45度)。这将使标记在使用时旋转该度数。

3. 从其他形状引用标记

3.1 思路

元素不是唯一可以使用标记的SVG元素。

，和元素也可以使用标记。它们以与元素完全相同的方式进行操作：通过在标记开始，标记中间和标记结束（分别为：marker-start，marker-mid和marker-end）CSS属性中引用元素的id属性。

3.2 标记单位

（可以将标记的大小设置为缩放，以适合使用它的路径的描边宽度） 。

例：

通过将元素的markerUnits设置为strokeWidth，可以实现此效果。这实际上是该属性的默认值，因此，即使您未设置markerUnits属性，这也是默认行为。

代码：

 
 
 
 
  
  
  
  
  
  
  
  
   orient="auto" markerUnits="strokeWidth"> 
  
  
  
  
    
  
  
  
  
 
 
 
 

为避免自动缩放标记以使其适应路径的笔触宽度，请将markerUnits属性设置为userSpaceOnUse。这样，无论使用它的路径的笔触宽度如何，标记都将保持其大小。

三、总结

文章基于HTML基础，介绍了SVG中marker标签 常见的用法。在实际应用中常见的标签样式，对每一种样式如何生成，都通过案例的分析进行了详细的讲解。

希望通过文章的学习，能够让读者更好的理解SVG。

文章名称：一篇文章带你了解SVG marker 标记
文章来源：http://www.shufengxianlan.com/qtweb/news46/131246.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联