diff --git a/files/en-us/web/api/svgfemergenodeelement/in1/index.md b/files/en-us/web/api/svgfemergenodeelement/in1/index.md new file mode 100644 index 000000000000000..9c2e43189eec4bd --- /dev/null +++ b/files/en-us/web/api/svgfemergenodeelement/in1/index.md @@ -0,0 +1,60 @@ +--- +title: "SVGFEMergeNodeElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMergeNodeElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMergeNodeElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMergeNodeElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMergeNode")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMergeNode` Element + +```html + + + + + + + + + + + + +``` + +We can access the `in` attribute of the `feMergeNode` element. + +```js +// Select the first feMergeNode element +const mergeNode = document.querySelector("feMergeNode"); +console.log(mergeNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/in1/index.md b/files/en-us/web/api/svgfemorphologyelement/in1/index.md new file mode 100644 index 000000000000000..5a3bfc3eccac373 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/in1/index.md @@ -0,0 +1,57 @@ +--- +title: "SVGFEMorphologyElement: in1 property" +short-title: in1 +slug: Web/API/SVGFEMorphologyElement/in1 +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.in1 +--- + +{{APIRef("SVG")}} + +The **`in1`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedString")}} object. + +## Examples + +### Accessing the `in` Property of `feMorphology` Element + +```html + + + + + + + + + +``` + +We can access the `in` attribute of the `feMorphology` element. + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); +console.log(morphologyNode.in1.baseVal); // Output: "SourceGraphic" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedString")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/operator/index.md b/files/en-us/web/api/svgfemorphologyelement/operator/index.md new file mode 100644 index 000000000000000..538fc75dc8a3502 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/operator/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: operator property" +short-title: operator +slug: Web/API/SVGFEMorphologyElement/operator +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.operator +--- + +{{APIRef("SVG")}} + +The **`operator`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the {{SVGAttr("operator")}} attribute of the given {{SVGElement("feMorphology")}} element. It takes one of the `SVG_MORPHOLOGY_OPERATOR_*` constants defined on this interface. + +## Value + +An {{domxref("SVGAnimatedEnumeration")}} object. + +## Examples + +### Accessing the `operator` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the 'operator' property +const operatorEnum = morphologyNode.operator.baseVal; + +console.log(operatorEnum); // Output: 2 (SVG_MORPHOLOGY_OPERATOR_DILATE) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedEnumeration")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md new file mode 100644 index 000000000000000..fa557ea0ba7d3d6 --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusx/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusX property" +short-title: radiusX +slug: Web/API/SVGFEMorphologyElement/radiusX +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusX +--- + +{{APIRef("SVG")}} + +The **`radiusX`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the X component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusX` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusX property +const radiusX = morphologyNode.radiusX.baseVal; + +console.log(`The X radius is: ${radiusX}`); // Output: 5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}} diff --git a/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md new file mode 100644 index 000000000000000..e01ba6bddde2bda --- /dev/null +++ b/files/en-us/web/api/svgfemorphologyelement/radiusy/index.md @@ -0,0 +1,59 @@ +--- +title: "SVGFEMorphologyElement: radiusY property" +short-title: radiusY +slug: Web/API/SVGFEMorphologyElement/radiusY +page-type: web-api-instance-property +browser-compat: api.SVGFEMorphologyElement.radiusY +--- + +{{APIRef("SVG")}} + +The **`radiusY`** read-only property of the {{domxref("SVGFEMorphologyElement")}} interface reflects the Y component of the {{SVGAttr("radius")}} attribute of the given {{SVGElement("feMorphology")}} element. + +## Value + +An {{domxref("SVGAnimatedNumber")}} object. + +## Examples + +### Accessing the `radiusY` Property + +```html + + + + + + + + + +``` + +```js +// Select the feMorphology element +const morphologyNode = document.querySelector("feMorphology"); + +// Access the radiusY property +const radiusY = morphologyNode.radiusY.baseVal; + +console.log(`The Y radius is: ${radiusY}`); // Output: 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGAnimatedNumber")}}