登录  /  注册
首页 > web前端 > H5教程 > 正文

SVG基础|绘制SVG连接标记MARKERS

PHP中文网
发布: 2016-05-17 09:07:32
原创
2022人浏览过

 SVG直线

svg 连接标记(markers)用于标记一条线或路径的开始、中间个结束位置。你可以在路径的开始处使用圆形或方形表示,在路径的结束处使用一个三角箭头表示。看羡慕的一个简单的例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
      <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
          <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
      </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: #000000;" />
      </marker>
  </defs>
 
  <path d="M100,10 L150,10 L150,60"
        style="stroke: #6666ff; stroke-width: 1px; fill: none;
                     marker-start: url(#markerCircle);
                     marker-end: url(#markerArrow);
                   "
          />
</svg>
登录后复制

941.png

首先我们需要注意的是元素中有两个元素。这两个元素定义了连接标记的开始和结束位置的显示图形。

接着要注意在路径元素中是如何使用连接标记的。这里是在style样式中使用marker-start和marker-end来分别指定连接标记的开始和结束元素。

定义一个连接标记

我们可以使用元素来定义一个连接标记。示例如下:

<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
</marker>
登录后复制

上面的例子定义了一个宽度为8,高度为8的连接标记。连接标记的宽度和高度必须明确指定,因为它是一个单独的图像元素。

id属性是用于在元素中引用连接标记的。

refX和refY属性用于指定在连接标记中哪个点用于作为参考点。参考点是当前连接标记的开始位置所在的坐标。在上面的例子中,这个坐标设置在圆的圆心处,也就是说圆的中心被放置在路径的开始位置。如果你不设置refX和refY属性,那么它们会被默认设置为0,那么路径的开始处会被放置在连接标记的左上角位置。

在连接标记中是一个元素,这个圆的圆心被设置为5,5。该中心点位于连接标记虚拟盒模型的中心位置。虚拟盒模型的宽度和高度分别对应markerWidth和markerHeight属性。

Auto Orientation

来看下面的一个连接标记的例子。这里使用一个三角形作为路径的箭头标记。

<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: #000000;" />
</marker>
登录后复制

元素中的元素绘制出一个箭头向右的三角形。如果路径不是水平放置的,我们就需要旋转这个三角形,让它来适应路径的方向。如果每次都手动来调整是非常麻烦的事情。这时我们可以将orient属性设置为auto,这样就会自动旋转图形以适应不同的路径。

下面是5条角度不同的直线,两端分别使用相同的标记图形。注意这些图形是如何自适应各种不同角度的直线的。

942.png

你也可以将orient属性的值设置为一个固定值,它的单位是degrees,例如设置为:45。这会在使用的时候将这个标记(marker)旋转45度。

在路径上引用标记

你可以使用下面的CSS属性来在路径上引用标记:

marker-start

marker-mid

marker-end

这三个CSS属性会将标记分别放置在路径的开始、中间和结束位置。

要使用这三个CSS属性,需要在元素的style样式中使用。想要引用一个标记,只需要在相应的CSS属性中使用ID来应用即可,例如下边的例子:

marker-start : url(#markerId);
登录后复制

markerId需要替换为你想要使用的元素。

下面是一个使用这三个CSS属性的例子:

<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:#000000;"/>
  </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: #000000;" />
  </marker>
</defs>
 
<path d="M100,20 l50,0 l0,50 l50,0"
      style="stroke: #0000cc; stroke-width: 1px; fill: none;
                   marker-start: url(#markerSquare);
                   marker-mid: url(#markerSquare);
                   marker-end: url(#markerArrow);
 
                 "
        />
登录后复制

上面的代码返回的结果如下:

943.png

使用其它元素来引用标记

元素不是唯一能够使用标记的SVG元素。元素也能够使用标记。它们使用标记的方法和元素相同:通过在CSSmarker-start、marker-mid和marker-end属性中引用元素的ID。

标记的大小

我们可以对标记进行缩放来适应路径描边的大小,下面是几个例子:

944.png

这个效果是通过设置元素的markerUnits属性的值为strokeWidth来实现的。实际上这是markerUnits属性的默认值。代码如下:

<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
    orient="auto" markerUnits="strokeWidth">
    <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>
登录后复制

如果不想标记的大小自动匹配路径的描边宽度,可以设置markerUnits的值为userSpaceOnUse。这样在使用标记的时候,标记将会保持它们原来的大小。

以上就是SVG基础|绘制SVG连接标记MARKERS的内容,更多相关内容请关注PHP中文网(www.php.cn)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号