文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 14:27

关注

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

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

一、Marker 简单案例

标记是使用元素创建的。

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

  1.  
  2.  
  3.  
  4. "utf-8"
  5. 项目 
  6.  
  7. "background-color: aqua;"
  8. "500" height="100"
  9.  
  10. "markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5"
  11. "5" cy="5" r="3" style="stroke: none; fill:#000000;"
  12.  
  13. "markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto"
  14. "M2,2 L2,11 L10,6 L2,2" style="fill: #000000;"
  15.           
  16.  
  17.  
  18. "M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;marker-start: url(#markerCircle);marker-end: url(#markerArrow);"
  19.       
  20.  
  21.  
  22.  

注:

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

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

二、常见的标记

1. 定义标记

可以使用元素定义标记。

例:

  1. "markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"
  2. "5" cy="5" r="3" style="stroke: none; fill:#000000;" /> 
  3.  

2. 自动定向

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

  1. "500" height="100"
  2.  
  3. "markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto"
  4. "1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"
  5.  
  6.  
  7.  
  8. "markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto"
  9. "M2,2 L2,13 L8,7 L2,2" style="fill: #000000;"
  10.  
  11.  
  12.  
  13. "M100,20 l0,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; 
  14.                       marker-start: url(#markerSquare); 
  15.                       marker-end: url(#markerArrow); 
  16.                       marker-mid: url(#markerSquare); 
  17.                     "> 
  18.  
  19. "M140,20 l25,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; 
  20.                       marker-start: url(#markerSquare);  
  21.                       marker-end: url(#markerArrow);    
  22.                       marker-mid: url(#markerSquare);  
  23.                     "> 
  24.  
  25.  
  26. "M180,20 l50,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; 
  27.                       marker-start: url(#markerSquare); 
  28.                       marker-end: url(#markerArrow); 
  29.                       marker-mid: url(#markerSquare); 
  30.                     "> 
  31.  
  32. "M220,20 l50,25" style="stroke: #0000cc; stroke-width: 1px; fill: none; 
  33.                       marker-start: url(#markerSquare); 
  34.                       marker-end: url(#markerArrow); 
  35.                       marker-mid: url(#markerSquare); 
  36.                     "> 
  37.  
  38. "M260,20 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none; 
  39.                       marker-start: url(#markerSquare);  
  40.                       marker-end: url(#markerArrow); 
  41.                       marker-mid: url(#markerSquare); 
  42.                     "> 
  43.  
  44.  

下面的图像 :

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

运行效果:

代码解析

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

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

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

3. 从其他形状引用标记

3.1 思路

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

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

3.2 标记单位

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

例:

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

代码:

  1. "markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" 
  2.    orient="auto" markerUnits="strokeWidth"
  3.    "1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/> 
  4.  

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

三、总结

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

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

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯