Skip to content

Commit 7c68bbf

Browse files
pepelsbeypepelsbey
committed
Document SVGFEGaussianBlurElement.edgeMode and SVGMarkerElement.orient
properties
1 parent 4be29f6 commit 7c68bbf

File tree

4 files changed

+201
-0
lines changed

4 files changed

+201
-0
lines changed

‎files/en-us/web/api/svgfeconvolvematrixelement/edgemode/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,4 @@ console.log(el.edgeMode.baseVal); // output: 2
4242
## See also
4343

4444
- {{domxref("SVGAnimatedEnumeration")}}
45+
- {{domxref("SVGFEGaussianBlurElement.edgeMode")}}

‎files/en-us/web/api/svgfegaussianblurelement/edgemode/index.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: "SVGFEGaussianBlurElement: edgeMode property"
3+
short-title: edgeMode
4+
slug: Web/API/SVGFEGaussianBlurElement/edgeMode
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGFEGaussianBlurElement.edgeMode
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`edgeMode`** read-only property of the {{domxref("SVGFEGaussianBlurElement")}} interface reflects the {{SVGAttr("edgeMode")}} attribute of the given {{SVGElement("feGaussianBlur")}} element. It takes one of the `SVG_EDGEMODE_*` constants defined on this interface. It determines what color values to use when the blur needs to sample pixels beyond the edge of the input image.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedEnumeration")}} object. The `baseVal` property of this object contains one of the following values:
16+
17+
- `0`
18+
- : `SVG_EDGEMODE_UNKNOWN` which means that the {{SVGAttr("edgeMode")}} attribute has a value other than the predefined keywords.
19+
- `1`
20+
- : `SVG_EDGEMODE_DUPLICATE` which means that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
21+
- `2`
22+
- : `SVG_EDGEMODE_WRAP` which means that the input image is extended by taking the color values from the opposite edge of the image.
23+
- `3`
24+
- : `SVG_EDGEMODE_NONE` which means that the input image is extended with pixel values of zero for R, G, B, and A.
25+
26+
## Examples
27+
28+
### Accessing the `edgeMode` property
29+
30+
```html
31+
<svg
32+
viewBox="0 0 200 200"
33+
width="300"
34+
height="300"
35+
xmlns="http://www.w3.org/2000/svg">
36+
<defs>
37+
<filter id="blur-filter">
38+
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
39+
</filter>
40+
</defs>
41+
<rect
42+
x="20"
43+
y="20"
44+
width="160"
45+
height="160"
46+
fill="rebeccapurple"
47+
filter="url(#blur-filter)" />
48+
</svg>
49+
<output></output>
50+
```
51+
52+
```css hidden
53+
body {
54+
font-family: system-ui;
55+
}
56+
57+
output {
58+
display: block;
59+
font: inherit;
60+
white-space: pre;
61+
}
62+
```
63+
64+
We can access the `edgeMode` property to read the current value:
65+
66+
```js
67+
const gaussianBlur = document.querySelector("feGaussianBlur");
68+
const log = document.querySelector("output");
69+
70+
if (gaussianBlur.edgeMode) {
71+
// Default edgeMode for feGaussianBlur is "none" (3)
72+
log.textContent = `edgeMode.baseVal: ${gaussianBlur.edgeMode.baseVal}`;
73+
} else {
74+
log.textContent = "edgeMode is not supported in this browser";
75+
}
76+
```
77+
78+
{{EmbedLiveSample("Examples", "", "320")}}
79+
80+
## Specifications
81+
82+
{{Specifications}}
83+
84+
## Browser compatibility
85+
86+
{{Compat}}
87+
88+
## See also
89+
90+
- {{SVGAttr("edgeMode")}}
91+
- {{domxref("SVGFEConvolveMatrixElement.edgeMode")}}

‎files/en-us/web/api/svgmarkerelement/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ _This interface also inherits properties from its parent, {{domxref("SVGElement"
3939
- 2
4040
- : `SVG_MARKERUNITS_ORIENT_ANGLE` which means that the {{SVGattr("orient")}} attribute has an {{cssxref("angle")}} or {{cssxref("number")}} value indicating the angle.
4141

42+
- {{domxref("SVGMarkerElement.orient")}}
43+
- : A string corresponding to the {{SVGattr("orient")}} attribute of the given {{SVGElement("marker")}} element.
4244
- {{domxref("SVGMarkerElement.orientAngle")}} {{ReadOnlyInline}}
4345
- : Returns an {{domxref("SVGAnimatedAngle")}} object containing the angle of the {{SVGattr("orient")}} attribute.
4446
- {{domxref("SVGMarkerElement.refX")}} {{ReadOnlyInline}}

‎files/en-us/web/api/svgmarkerelement/orient/index.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: "SVGMarkerElement: orient property"
3+
short-title: orient
4+
slug: Web/API/SVGMarkerElement/orient
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGMarkerElement.orient
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`orient`** property of the {{domxref("SVGMarkerElement")}} interface is a string that reflects the {{SVGAttr("orient")}} attribute of the given {{SVGElement("marker")}} element. It defines how the marker is rotated when it is placed at its position on the shape.
12+
13+
Unlike {{domxref("SVGMarkerElement.orientType")}} and {{domxref("SVGMarkerElement.orientAngle")}}, which provide read-only access to the orientation as an enumerated type and angle respectively, the `orient` property allows directly getting and setting the `orient` attribute as a string.
14+
15+
## Value
16+
17+
A string. Possible values are:
18+
19+
- `"auto"`
20+
- : The marker is automatically rotated to follow the direction of the path at the point where it is placed.
21+
- `"auto-start-reverse"`
22+
- : If placed by `marker-start`, the marker is oriented 180° different from the orientation that would be used if `auto` were specified. For all other markers, `auto-start-reverse` means the same as `auto`.
23+
- An `<angle>` value (e.g., `"45deg"`, `"0.5turn"`)
24+
- : The marker is rotated by the specified angle, measured from the horizontal.
25+
- A `<number>` value (e.g., `"45"`)
26+
- : The marker is oriented at the specified angle in degrees.
27+
28+
## Examples
29+
30+
### Accessing the `orient` property
31+
32+
```html
33+
<svg
34+
viewBox="0 0 100 100"
35+
width="300"
36+
height="300"
37+
xmlns="http://www.w3.org/2000/svg">
38+
<defs>
39+
<marker
40+
id="arrow"
41+
viewBox="0 0 10 10"
42+
refX="5"
43+
refY="5"
44+
markerWidth="12"
45+
markerHeight="12"
46+
orient="auto-start-reverse">
47+
<path d="M 0 0 L 10 5 L 0 10 z" />
48+
</marker>
49+
</defs>
50+
<polyline
51+
points="10,90 50,10 90,90"
52+
fill="none"
53+
stroke="black"
54+
marker-start="url(#arrow)"
55+
marker-mid="url(#arrow)"
56+
marker-end="url(#arrow)" />
57+
</svg>
58+
<output></output>
59+
```
60+
61+
```css hidden
62+
body {
63+
font-family: system-ui;
64+
}
65+
66+
output {
67+
display: block;
68+
font: inherit;
69+
white-space: pre;
70+
}
71+
```
72+
73+
We can read the `orient` property and then set it to a new value:
74+
75+
```js
76+
const marker = document.querySelector("marker");
77+
const log = document.querySelector("output");
78+
79+
if ("orient" in marker) {
80+
// Read the current orient value
81+
log.textContent = `orient: "${marker.orient}"\n`; // "auto-start-reverse"
82+
83+
// Set a new orient value
84+
marker.orient = "90deg";
85+
log.textContent += `after setting "90deg": "${marker.orient}"`;
86+
} else {
87+
log.textContent = "orient is not supported in this browser";
88+
}
89+
```
90+
91+
{{EmbedLiveSample("Examples", "", "340")}}
92+
93+
## Specifications
94+
95+
{{Specifications}}
96+
97+
## Browser compatibility
98+
99+
{{Compat}}
100+
101+
## See also
102+
103+
- {{domxref("SVGMarkerElement.orientType")}}
104+
- {{domxref("SVGMarkerElement.orientAngle")}}
105+
- {{domxref("SVGMarkerElement.setOrientToAuto()")}}
106+
- {{domxref("SVGMarkerElement.setOrientToAngle()")}}
107+
- {{SVGAttr("orient")}}

0 commit comments

Comments
 (0)