Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

zh-cn(fix-partof): svg-marker #12600

Merged
merged 7 commits into from
Apr 10, 2023
Merged

zh-cn(fix-partof): svg-marker #12600

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ead10bc
zh-cn(fix-partof): svg-marker
fwqaaq Apr 7, 2023
262d306
update
fwqaaq Apr 7, 2023
3f52a69
update
fwqaaq Apr 7, 2023
5a3510e
Update files/zh-cn/web/svg/element/marker/index.md
fwqaaq Apr 8, 2023
5c37b0c
Update files/zh-cn/web/svg/element/marker/index.md
fwqaaq Apr 8, 2023
d9e078e
update
fwqaaq Apr 10, 2023
fada095
Update files/zh-cn/web/svg/element/marker/index.md
fwqaaq Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 182 additions & 40 deletions files/zh-cn/web/svg/element/marker/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,213 @@
---
title: marker
title: <marker>
slug: Web/SVG/Element/marker
---

{{SVGRef}}

`marker`元素定义了在特定的{{ SVGElement("path") }}元素、{{ SVGElement("line") }}元素、{{ SVGElement("polyline") }}元素或者{{ SVGElement("polygon") }}元素上绘制的箭头或者多边标记图形。
**`<marker>`** 元素定义了在给定 {{SVGElement("path")}}、{{SVGElement("line")}}、{{SVGElement("polyline")}} 或 {{SVGElement("polygon")}} 元素上绘制箭头或者多边标记所使用的图形。

## 用法

{{svginfo}}
可以使用 {{SVGAttr("marker-start")}}、{{SVGAttr("marker-mid")}} 和 {{SVGAttr("marker-end")}} 属性将标记附着到形状上。

## 示例

» [marker.svg](/files/3267/marker.svg)
### 绘制箭头

## 属性

### 全局属性
以下示例展示如何在直线或者曲线路径上绘制箭头。对于曲线路径，每个点都用 {{SVGAttr("marker-mid")}} 标记绘制一个箭头。

- [核心属性](/zh-CN/SVG/Attribute#Core) »
- [外观属性](/zh-CN/SVG/Attribute#Presentation) »
- {{ SVGAttr("class") }}
- {{ SVGAttr("style") }}
- {{ SVGAttr("externalResourcesRequired") }}
- {{ SVGAttr("viewBox") }}
- {{ SVGAttr("preserveAspectRatio") }}
- {{ SVGAttr("transform") }}

### 专有属性

- {{ SVGAttr("markerUnits") }}
- {{ SVGAttr("refX") }}
- {{ SVGAttr("refY") }}
- {{ SVGAttr("markerWidth") }}
- {{ SVGAttr("markerHeight") }}
- {{ SVGAttr("orient") }}
```css hidden
html,
body,
svg {
height: 100%;
}
```

## DOM 接口
```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 用作箭头的 marker -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>

该元素实现了[`SVGMarkerElement`](/zh-CN/DOM/SVGMarkerElement) 接口。
<!-- 带标记的线 -->
<line
x1="10"
y1="10"
x2="90"
y2="90"
stroke="black"
marker-end="url(#arrow)" />

<!-- 带标记的曲线-->
<path
d="M 110 10
C 120 20, 130 20, 140 10
C 150 0, 160 0, 170 10
C 180 20, 190 20, 200 10"
stroke="black"
fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
```

## Example
{{EmbedLiveSample('绘制箭头', 200, 200)}}

### SVG
### 绘制多边标记

```plain
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
```css hidden
html,
body,
svg {
height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<!-- 箭头 marker 定义 -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>

<!-- 点 marker 定义 -->
<marker
id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>

<polyline points="10,90 50,80 90,20" fill="none" stroke="black"
stroke-width="2" marker-end="url(#Triangle)" />
<!-- 在两个方向上都带有箭头的坐标轴 -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />

<!-- 多边标记数据线 -->
<polyline
points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
```

### Result
{{EmbedLiveSample('Drawing_polymarkers', 200, 200)}}

### 使用 context fill 和 stroke

以下示例展示了如何使用 `context-fill` 和 `context-stroke` 值可以让一个 marker 使用与其附加到的形状相同的填充和描边。

```html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<marker
id="circle"
markerWidth="6"
markerHeight="6"
refX="3"
refY="3"
markerUnits="strokeWidth">
<circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
</marker>

<style>
path {
marker: url(#circle);
}
</style>

<path d="M 10,10 30,10 h 10" stroke="black" />
<path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
<path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
<path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
```

```css hidden
html,
body,
svg {
height: 100%;
}
```

{{EmbedLiveSample('使用 context_fill_and_stroke', 200, 200)}}

{{EmbedLiveSample("Example")}}
## 属性

- {{SVGAttr("markerHeight")}}
- : 该属性定义了 marker 视口的高度。*值的类型*：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)**；*默认值*：`3`；*动画性*：**有**
- {{SVGAttr("markerUnits")}}
- : 该属性为 `markerWidth`、`markerHeight` 和 `<marker>` 的内容定义了坐标系。*值的类型*：`userSpaceOnUse`|`strokeWidth` ；*默认值*：`strokeWidth`；*动画性*：**有**
- {{SVGAttr("markerWidth")}}
- : 该属性定义了 marker 视图的宽度。*值的类型*：**[\<length>](/zh-CN/docs/Web/SVG/Content_type#长度)** ；*默认值*：`3`；*动画性*：**有**
- {{SVGAttr("orient")}}
- : 该属性定义了 marker 相对于它所附着到形状的方向。*值的类型*：`auto`|`auto-start-reverse`|**[\<angle>](/zh-CN/docs/Web/SVG/Content_type#角度)** ；*默认值*：`0`；*动画性*：**有**
- {{SVGAttr("preserveAspectRatio")}}
- : 该属性定义了 svg 片段在嵌入具有不同宽高比例的容器中应该如何变形。*值的类型*：(`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ；*默认值*：`xMidYMid meet`；*动画性*：**有**
- {{SVGAttr("refX")}}
- : 该属性定义了标记参考点的 x 的坐标。
*值的类型*：`left`|`center`|`right`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有**
- {{SVGAttr("refY")}}
- : 该属性定义了标记参考点的 y 的坐标。
*值的类型*：`top`|`center`|`bottom`|**[\<coordinate>](/zh-CN/docs/Web/SVG/Content_type#坐标)** ；*默认值*：`0`；*动画性*：**有**
- {{SVGAttr("viewBox")}}
- : 该属性定义了当前 SVG 片段的 SVG 视口边界。
*值的类型*：**[\<list-of-numbers>](/zh-CN/docs/Web/SVG/Content_type#t值数列)** ；*默认值*：none；*动画性*：**有**

### 全局属性

- [核心属性](/zh-CN/docs/Web/SVG/Attribute/Core)
- : 最重要的：{{SVGAttr('id')}}、{{SVGAttr('tabindex')}}
- [样式属性](/zh-CN/docs/Web/SVG/Attribute/Styling)
- : {{SVGAttr('class')}}、{{SVGAttr('style')}}
- [条件处理属性](/zh-CN/docs/Web/SVG/Attribute/Conditional_Processing)
- : 最重要的：{{SVGAttr('requiredExtensions')}}、{{SVGAttr('systemLanguage')}}
- [表现属性](/zh-CN/docs/Web/SVG/Attribute/Presentation)
- : 最重要的：{{SVGAttr('clip-path')}}、{{SVGAttr('clip-rule')}}、{{SVGAttr('color')}}、{{SVGAttr('color-interpolation')}}、{{SVGAttr('color-rendering')}}、{{SVGAttr('cursor')}}、{{SVGAttr('display')}}、{{SVGAttr('fill')}}、{{SVGAttr('fill-opacity')}}、{{SVGAttr('fill-rule')}}、{{SVGAttr('filter')}}、{{SVGAttr('mask')}}、{{SVGAttr('opacity')}}、{{SVGAttr('pointer-events')}}、{{SVGAttr('shape-rendering')}}、{{SVGAttr('stroke')}}、{{SVGAttr('stroke-dasharray')}}、{{SVGAttr('stroke-dashoffset')}}、{{SVGAttr('stroke-linecap')}}、{{SVGAttr('stroke-linejoin')}}、{{SVGAttr('stroke-miterlimit')}}、{{SVGAttr('stroke-opacity')}}、{{SVGAttr('stroke-width')}}、{{SVGAttr("transform")}}、{{SVGAttr('vector-effect')}}、{{SVGAttr('visibility')}}
- ARIA 属性
- : `aria-activedescendant`、`aria-atomic`、`aria-autocomplete`、`aria-busy`、`aria-checked`、`aria-colcount`、`aria-colindex`、`aria-colspan`、`aria-controls`、`aria-current`、`aria-describedby`、`aria-details`、`aria-disabled`、`aria-dropeffect`、`aria-errormessage`、`aria-expanded`、`aria-flowto`、`aria-grabbed`、`aria-haspopup`、`aria-hidden`、`aria-invalid`、`aria-keyshortcuts`、`aria-label`、`aria-labelledby`、`aria-level`、`aria-live`、`aria-modal`、`aria-multiline`、`aria-multiselectable`、`aria-orientation`、`aria-owns`、`aria-placeholder`、`aria-posinset`、`aria-pressed`、`aria-readonly`、`aria-relevant`、`aria-required`、`aria-roledescription`、`aria-rowcount`、`aria-rowindex`、`aria-rowspan`、`aria-selected`、`aria-setsize`、`aria-sort`、`aria-valuemax`、`aria-valuemin`、`aria-valuenow`、`aria-valuetext`、`role`

## 使用说明

{{svginfo}}

## 规范

{{Specifications}}

## 浏览器兼容性

{{Compat}}

## 参见

- 与 marker 相关的属性：{{SVGAttr("marker-start")}}、{{SVGAttr("marker-mid")}} 和 {{SVGAttr("marker-end")}}