SVG中的pattern和marker元素的属性，包括使用方法、属性列表和效果示例

SVG是一种基于XML的图形格式，它具有与HTML类似的结构语法和标记元素。在SVG中，pattern和marker元素是两个常用的元素，它们可以帮助我们实现更复杂、更丰富的图形效果。本文将会详细介绍SVG中的pattern和marker元素的属性，包括使用方法、属性列表和效果示例等，以帮助读者更好地掌握它们的应用。

一、pattern元素

1. 使用方法

在SVG中，pattern元素用于定义用于填充对象的图案。pattern元素必须包含一个或多个图形元素，这些图形元素将被重复平铺来填充对象。pattern元素的基本语法如下：

<pattern id="pattern_id" x="x" y="y" width="width" height="height"> <rect x="0" y="0" width="10" height="10" fill="red"></rect> <rect x="10" y="0" width="10" height="10" fill="blue"></rect> </pattern>

其中，id属性指定了图案的唯一标识符；x和y属性指定了图案的起始坐标；width和height属性指定了图案的宽度和高度。图案中的图形元素可以是任意的SVG元素，比如矩形、圆形、椭圆形等。

1. 属性列表

pattern元素有以下属性：

• id：图案的唯一标识符。
• x、y：图案的起始坐标。
• width、height：图案的宽度和高度。
• viewBox：定义图案的可见区域。
• patternUnits：指定图案的单位，默认为用户坐标系。
• patternContentUnits：指定图案中图形元素的单位，默认为对象的用户坐标系。
• preserveAspectRatio：指定图案如何适应视口。

1. 效果示例

下面是一个简单的图案效果示例，它使用两个矩形元素作为图案元素，通过pattern元素将这两个矩形平铺填充到一个矩形对象中：

<svg width="200" height="200"> <defs> <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="10" height="10" fill="#ff7f00"></rect> <rect x="10" y="10" width="10" height="10" fill="#bfff00"></rect> </pattern> </defs> <rect x="0" y="0" width="200" height="200" fill="url(#myPattern)"></rect> </svg>

该示例中，我们定义了一个id为myPattern的pattern元素，它包含两个矩形元素，分别填充为红色和绿色。然后，在一个宽高为200的矩形对象上，使用fill属性将该pattern元素作为填充图案进行平铺，实现了一个彩色的方格纹理效果。

二、marker元素

1. 使用方法

在SVG中，marker元素用于定义路径或折线的端点样式。marker元素必须定义在defs元素中，并使用marker属性将其应用到路径或折线元素上。marker元素的基本语法如下：

<defs> <marker id="marker_id" markerWidth="marker_width" markerHeight="marker_height" refX="ref_x" refY="ref_y" orient="auto"> <circle cx="2" cy="2" r="2" fill="black"></circle> </marker> </defs> <path d="M0,0 L10,10" style="stroke: black; marker-end: url(#marker_id);" />

其中，id属性指定了marker元素的唯一标识符；markerWidth和markerHeight属性指定了marker元素的宽度和高度；refX和refY属性指定了marker元素的位置参考点；orient属性可以指定marker元素的方向，auto表示根据路径方向自动调整。marker元素中的子元素可以是任意的SVG元素。

1. 属性列表

marker元素有以下属性：

• id：marker元素的唯一标识符。
• markerWidth、markerHeight：marker元素的宽度和高度。
• viewBox：定义marker元素的可见区域。
• refX、refY：marker元素的位置参考点。
• orient：指定marker元素的方向。
• preserveAspectRatio：指定marker元素如何适应引用对象。

1. 效果示例

下面是一个简单的marker效果示例，它使用一个圆形元素作为marker元素，作为路径线段的端点样式：

<svg width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <marker id="myMarker" markerWidth="4" markerHeight="4" refX="2" refY="2" orient="auto"> <circle cx="2" cy="2" r="2" fill="black"></circle> </marker> </defs> <path d="M20,20 L180,20" style="stroke: black; marker-end: url(#myMarker);" /> </svg>

该示例中，我们定义了一个id为myMarker的marker元素，它包含一个圆形元素，用于表示路径线段的端点。然后，在一条从(20,20)到(180,20)的路径上，使用marker-end属性将该marker元素应用到路径的末尾，实现了一个带圆形样式的折线段。

三、结论

本文详细介绍了SVG中的pattern和marker元素的属性，包括使用方法、属性列表和效果示例等。pattern元素可以用于定义用于填充对象的图案，而marker元素可以用于定义路径或折线的端点样式。了解和掌握这两个元素的属性，可以帮助我们实现更复杂、更丰富的SVG图形效果。