MDN Feature pages for SVGUseElement

files/en-us/web/api/svguseelement/height/index.md

@@ -0,0 +1,56 @@
+---
+title: "SVGUseElement: height property"
+short-title: height
+slug: Web/API/SVGUseElement/height
+page-type: web-api-instance-property
+browser-compat: api.SVGUseElement.height
+---
+
+{{APIRef("SVG")}}
+
+The **`height`** read-only property of the {{domxref("SVGUseElement")}} interface describes the height of the referenced element as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("height")}} attribute on the {{SVGElement("use")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the height of the referenced element in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+    <circle id="circle2" cx="50" cy="50" r="40" fill="red" />
+  </defs>
+  <use x="50%" y="50%" href="#circle1" height="50" />
+  <use x="25%" y="50%" href="#circle2" height="100" />
+</svg>
+```
+
+We can access the computed values of the `height` attributes:
+
+```js
+const uses = document.querySelectorAll("use");
+const heightUse1 = uses[0].height;
+const heightUse2 = uses[1].height;
+
+console.dir(heightUse1.baseVal.value); // output: 50
+console.dir(heightUse2.baseVal.value); // output: 100
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGUseElement.width")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svguseelement/href/index.md

@@ -0,0 +1,46 @@
+---
+title: "SVGUseElement: href property"
+short-title: href
+slug: Web/API/SVGUseElement/href
+page-type: web-api-instance-property
+browser-compat: api.SVGAnimationElement.href
+---
+
+{{APIRef("SVG")}}
+
+The **`href`** read-only property of the {{domxref("SVGUseElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+    <circle id="circle2" cx="50" cy="50" r="40" fill="red" />
+  </defs>
+  <use href="#circle1" x="50" y="50" />
+  <use href="#circle2" x="100" y="50" />
+</svg>
+```
+
+We can access the `href` attribute of the {{SVGElement("use")}} elements:
+
+```js
+const uses = document.querySelectorAll("use");
+console.log(uses[0].href.baseVal); // output: "#circle1"
+console.log(uses[1].href.baseVal); // output: "#circle2"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/svguseelement/width/index.md

@@ -0,0 +1,56 @@
+---
+title: "SVGUseElement: width property"
+short-title: width
+slug: Web/API/SVGUseElement/width
+page-type: web-api-instance-property
+browser-compat: api.SVGUseElement.width
+---
+
+{{APIRef("SVG")}}
+
+The **`width`** read-only property of the {{domxref("SVGUseElement")}} interface describes the width of the referenced element as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("width")}} attribute on the {{SVGElement("use")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the width of the referenced element in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+    <circle id="circle2" cx="50" cy="50" r="40" fill="red" />
+  </defs>
+  <use x="50%" y="50%" href="#circle1" width="50" />
+  <use x="25%" y="50%" href="#circle2" width="100" />
+</svg>
+```
+
+We can access the computed values of the `width` attributes:
+
+```js
+const uses = document.querySelectorAll("use");
+const widthUse1 = uses[0].width;
+const widthUse2 = uses[1].width;
+
+console.dir(widthUse1.baseVal.value); // output: 50
+console.dir(widthUse2.baseVal.value); // output: 100
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGUseElement.height")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svguseelement/x/index.md

@@ -0,0 +1,56 @@
+---
+title: "SVGUseElement: x property"
+short-title: x
+slug: Web/API/SVGUseElement/x
+page-type: web-api-instance-property
+browser-compat: api.SVGUseElement.x
+---
+
+{{APIRef("SVG")}}
+
+The **`x`** read-only property of the {{domxref("SVGUseElement")}} interface describes the x-axis coordinate of the start point of the referenced element as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("x")}} attribute on the {{SVGElement("use")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the top-left corner of the referenced element in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+    <circle id="circle2" cx="50" cy="50" r="40" fill="red" />
+  </defs>
+  <use x="50%" y="50%" href="#circle1" />
+  <use x="25%" y="50%" href="#circle2" />
+</svg>
+```
+
+We can access the computed values of the `x` attributes:
+
+```js
+const uses = document.querySelectorAll("use");
+const xUse1 = uses[0].x;
+const xUse2 = uses[1].x;
+
+console.dir(xUse1.baseVal.value); // output: 100 (50% of 200)
+console.dir(xUse2.baseVal.value); // output: 50 (25% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGUseElement.y")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svguseelement/y/index.md

@@ -0,0 +1,56 @@
+---
+title: "SVGUseElement: y property"
+short-title: "y"
+slug: Web/API/SVGUseElement/y
+page-type: web-api-instance-property
+browser-compat: api.SVGUseElement.y
+---
+
+{{APIRef("SVG")}}
+
+The **`y`** read-only property of the {{domxref("SVGUseElement")}} interface describes the y-axis coordinate of the start point of the referenced element as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("y")}} attribute on the {{SVGElement("use")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the top-left corner of the referenced element in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Examples
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+    <circle id="circle2" cx="50" cy="50" r="40" fill="red" />
+  </defs>
+  <use x="50%" y="50%" href="#circle1" />
+  <use x="25%" y="50%" href="#circle2" />
+</svg>
+```
+
+We can access the computed values of the `y` attributes:
+
+```js
+const uses = document.querySelectorAll("use");
+const yUse1 = uses[0].y;
+const yUse2 = uses[1].y;
+
+console.dir(yUse1.baseVal.value); // output: 100 (50% of 200)
+console.dir(yUse2.baseVal.value); // output: 100 (50% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGUseElement.x")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}