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.

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

New Pages: SVGFEDiffuseLightingElement #37425

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: "SVGFEDiffuseLightingElement: diffuseConstant property"
short-title: diffuseConstant
slug: Web/API/SVGFEDiffuseLightingElement/diffuseConstant
page-type: web-api-instance-property
browser-compat: api.SVGFEDiffuseLightingElement.diffuseConstant
---

{{APIRef("SVG")}}

The **`diffuseConstant`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("diffuseConstant")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Examples

### Access the `diffuseConstant` property

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="diffuseLightingFilter">
<feDiffuseLighting
in="SourceGraphic"
diffuseConstant="1.5"
lighting-color="white">
<feDistantLight azimuth="45" elevation="55" />
</feDiffuseLighting>
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightblue;"
filter="url(#diffuseLightingFilter)" />
</svg>
```

```js
const diffuseLighting = document.querySelector("feDiffuseLighting");

console.log(diffuseLighting.diffuseConstant.baseVal); // Output: 1.5
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
62 changes: 62 additions & 0 deletions files/en-us/web/api/svgfediffuselightingelement/in1/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: "SVGFEDiffuseLightingElement: in1 property"
short-title: in1
slug: Web/API/SVGFEDiffuseLightingElement/in1
page-type: web-api-instance-property
browser-compat: api.SVGFEDiffuseLightingElement.in1
---

{{APIRef("SVG")}}

The **`in1`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.

## Value

An {{domxref("SVGAnimatedString")}} object.

## Examples

### Accessing the `in` Property of `feDiffuseLighting` Element

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="diffuseLightingFilter">
<feDiffuseLighting
in="SourceGraphic"
result="diffuseLightingResult"
lighting-color="white"
surfaceScale="1">
<feDistantLight azimuth="45" elevation="55" />
</feDiffuseLighting>
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightblue;"
filter="url(#diffuseLightingFilter)" />
</svg>
```

We can access the `in` attribute of the `feDiffuseLighting` element.

```js
const diffuseLighting = document.querySelector("feDiffuseLighting");

console.log(diffuseLighting.in1.baseVal); // Output: "SourceGraphic"
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedString")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "SVGFEDiffuseLightingElement: kernelUnitLengthX property"
short-title: kernelUnitLengthX
slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthX
page-type: web-api-instance-property
browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthX
---

{{APIRef("SVG")}}

The **`kernelUnitLengthX`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the X component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "SVGFEDiffuseLightingElement: kernelUnitLengthY property"
short-title: kernelUnitLengthY
slug: Web/API/SVGFEDiffuseLightingElement/kernelUnitLengthY
page-type: web-api-instance-property
browser-compat: api.SVGFEDiffuseLightingElement.kernelUnitLengthY
---

{{APIRef("SVG")}}

The **`kernelUnitLengthY`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the Y component of the {{SVGAttr("kernelUnitLength")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: "SVGFEDiffuseLightingElement: surfaceScale property"
short-title: surfaceScale
slug: Web/API/SVGFEDiffuseLightingElement/surfaceScale
page-type: web-api-instance-property
browser-compat: api.SVGFEDiffuseLightingElement.surfaceScale
---

{{APIRef("SVG")}}

The **`surfaceScale`** read-only property of the {{domxref("SVGFEDiffuseLightingElement")}} interface reflects the {{SVGAttr("surfaceScale")}} attribute of the given {{SVGElement("feDiffuseLighting")}} element.

## Value

An {{domxref("SVGAnimatedNumber")}} object.

## Examples

### Access the `surfaceScale` property

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="diffuseLightingFilter">
<feDiffuseLighting
in="SourceGraphic"
surfaceScale="2"
lighting-color="white">
<feDistantLight azimuth="45" elevation="55" />
</feDiffuseLighting>
</filter>
</defs>
<rect
x="20"
y="20"
width="100"
height="100"
style="fill:lightblue;"
filter="url(#diffuseLightingFilter)" />
</svg>
```

```js
const diffuseLighting = document.querySelector("feDiffuseLighting");

console.log(diffuseLighting.surfaceScale.baseVal); // Output: 2
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("SVGAnimatedNumber")}}
Loading