-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
97 lines (77 loc) · 2.19 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
---
title: <glyph>
slug: Web/SVG/Element/glyph
page-type: svg-element
status:
- deprecated
browser-compat: svg.elements.glyph
---
{{SVGRef}}{{deprecated_header}}
A **`<glyph>`** defines a single glyph in an SVG font.
## Usage context
{{svginfo}}
## Attributes
- {{SVGAttr("d")}} {{Deprecated_Inline}}
- {{SVGAttr("horiz-adv-x")}} {{Deprecated_Inline}}
- {{SVGAttr("vert-origin-x")}} {{Deprecated_Inline}}
- {{SVGAttr("vert-origin-y")}} {{Deprecated_Inline}}
- {{SVGAttr("vert-adv-y")}} {{Deprecated_Inline}}
- {{SVGAttr("unicode")}} {{Deprecated_Inline}}
- {{SVGAttr("glyph-name")}} {{Deprecated_Inline}}
- {{SVGAttr("orientation")}} {{Deprecated_Inline}}
- {{SVGAttr("arabic-form")}} {{Deprecated_Inline}}
- {{SVGAttr("lang")}} {{Deprecated_Inline}}
## DOM Interface
This element implements the {{domxref("SVGGlyphElement")}} interface.
## Example
### SVG
```html
<svg
width="400px"
height="300px"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- Example copied from https://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
<defs>
<font id="Font1" horiz-adv-x="1000">
<font-face
font-family="Super Sans"
font-weight="bold"
font-style="normal"
units-per-em="1000"
cap-height="600"
x-height="400"
ascent="700"
descent="300"
alphabetic="0"
mathematical="350"
ideographic="400"
hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold" />
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
<glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
<glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
</font>
</defs>
<text
x="100"
y="100"
style="font-family: 'Super Sans', Helvetica, sans-serif;
font-weight: bold; font-style: normal">
Text using embedded font!
</text>
</svg>
```
### Result
{{EmbedLiveSample("Example", 400, 300)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{SVGElement("font")}}
- {{SVGElement("missing-glyph")}}
- [SVG tutorial: SVG fonts](/en-US/docs/Web/SVG/Tutorial/SVG_fonts)