svg中& lt; marker>元素怎么用 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了svg中& lt; marker>元素怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强> & lt; marker>元素

标记是一种可以连结一个或多个路径,线、折线、或多边形的顶点的标志类型。最常见的用例是绘制箭头或在输出结果的线上的标记一个(多点标记)图形。
使用& lt; marker>元素创建一个标记,以及其相关属性。通常我们把笔放在& lt; defs>元素中,然后在其它地方对其进行引用。下面我们通过一个简单的实例来学习。

& lt; svg 宽度=?00 px",身高=?00 px"祝辞, 　　,,,& lt; defs>, 　　,,,& lt; marker id=癮rrow", markerWidth=?0“, markerHeight=?0“, refx=?“, refy=?“,东方=癮uto", markerUnits=皊trokeWidth"祝辞,& lt; path d=癕0, 0, 0, 6, L9 (3, z",填补=? f00",/祝辞, 　　,,,& lt;/marker> 　　,,,& lt;/defs>, 　　,,,& lt; line x1=?0”,日元=?0”,x2=?50“, y2=?0”,中风=? 000“,笔划宽度=?“,marker-end=皍rl(#箭头)“,/比; 　　& lt;/svg>

<强>标记的属性

markerWidth和markerHeight属性定义了标志视窗的宽度和高度。

上面的实例中我把markerWidth和markerHeight都设置为10 px.path中绘制出的三角形需要适应9 px x 6 px的面积,所以我也可以把markerWidth设置为9,然互markerHeight设置为6。这是标记可以接受的最小尺寸,任何小于这个的尺寸都会导致图形被裁剪。
接下来的两个属性,refX和refY,指的是图形元素和标记连接的位置坐标。我们还给背后的场景应用了一个变换,来移动标记,与之对齐。

下一个属性,东方,这个属性是我为什么在转换线的方向时,不需要调整标记的原因。它接受一个汽车值,或者一个角度值,这个值决定了标记是否要旋转,在与其它内容连接的时候。

汽车这个值表示标记会随着应用的元素一起旋转.45deg这个值则表示标记的方向一直保持45度,不会随着连接的元素一起旋转。大多数时候这个值都是设置为汽车的。

最后一个属性是markerUNits,用于确定标记是否进行缩放。它定义了markerWidth和markerHeight,以及标记的内容本身的坐标系统。

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

strokeWidth:坐标系统中的标记值和当前描边宽度的单位是相同的尺寸。也就是说strokeWidth这个值允许你的标记缩放。
userSpaceOnUse:标记的值是当前用户坐标系统的值,也就是说如果你的标记是一个半径为10 px的圆,它就一直都是10 px的半径,不受连接的元素的影响。

<强>标记特性,在元素中引用标记

marker-end=皍rl(#箭头)”

给线、路径、折线、多边形这些基础图形应用标记一共有四种方法:

<李>

marker-start=" url(#记号id)”

<李>

marker-mid=" url(#记号id)”

<李>

marker-end=" url(#记号id)”

<李>

标记=" url(#记号id)”

感谢你能够认真阅读完这篇文章,希望小编分享的“svg中& lt; marker>元素怎么用”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!