Adds the SVGMarkerElement Interface (#4990)

* Adds the SVGMarkerElement Interface * Update files/en-us/web/api/svgmarkerelement/index.html Co-authored-by: Joe Medley <jmedley@google.com> * Update files/en-us/web/api/svgmarkerelement/orienttype/index.html Co-authored-by: Joe Medley <jmedley@google.com> * Update files/en-us/web/api/svgmarkerelement/index.html Co-authored-by: Joe Medley <jmedley@google.com> * Update files/en-us/web/api/svgmarkerelement/index.html Co-authored-by: Joe Medley <jmedley@google.com> * fix to code * adds viewBox and preserveAspectRatio * fixing naming * clarifying orientType * Update files/en-us/web/api/svgmarkerelement/index.html Co-authored-by: Joe Medley <jmedley@google.com> * Update files/en-us/web/api/svgmarkerelement/viewbox/index.html Co-authored-by: Joe Medley <jmedley@google.com> * Update files/en-us/web/api/svgmarkerelement/preserveaspectratio/index.html Co-authored-by: Joe Medley <jmedley@google.com> * preserveAspectRatio constants Co-authored-by: Joe Medley <jmedley@google.com>
mdn · May 20, 2021 · 5885c0d · 5885c0d
1 parent ac7d3ba
commit 5885c0d
Show file tree

Hide file tree

Showing 12 changed files with 878 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgmarkerelement/index.html b/files/en-us/web/api/svgmarkerelement/index.html
@@ -0,0 +1,126 @@
+---
+title: SVGMarkerElement
+slug: Web/API/SVGMarkerElement
+tags:
+  - API
+  - Interface
+  - Reference
+  - SVGMarkerElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p class="summary">The <strong><code>SVGMarkerElement</code></strong> interface provides access to the properties of {{SVGElement("marker")}} elements, as well as methods to manipulate them. The {{SVGElement("marker")}} element defines the graphics used for drawing marks on a shape.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<p>The following properties and methods all return, or act on the attributes of the {{SVGElement("marker")}} element represented by <code>SVGMarkerElement</code>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+  <dt>{{domxref("SVGMarkerElement.markerUnits")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedEnumeration")}} object, with one of the following values:
+    <dl>
+      <dt>0</dt>
+      <dd><code>SVG_MARKERUNITS_UNKNOWN</code> which means that the {{SVGattr("markerUnits")}} attribute has a value other than the two predefined keywords.</dd>
+      <dt>1</dt>
+      <dd><code>SVG_MARKERUNITS_USERSPACEONUSE</code> which means that the {{SVGattr("markerUnits")}} attribute has the keyword value <code>userSpaceOnUse</code>.</dd>
+      <dt>2</dt>
+      <dd><code>SVG_MARKERUNITS_STROKEWIDTH</code> which means that the {{SVGattr("markerUnits")}} attribute has the keyword value <code>strokeWidth</code>.</dd>
+    </dl>
+  </dd>
+  <dt>{{domxref("SVGMarkerElement.markerWidth")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedLength")}} object containing the width of the {{SVGElement("marker")}} viewport.</dd>
+  <dt>{{domxref("SVGMarkerElement.markerHeight")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedLength")}} object containing the height of the {{SVGElement("marker")}} viewport.</dd>
+  <dt>{{domxref("SVGMarkerElement.orientType")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedEnumeration")}} object, with one of the following values:
+    <dl>
+      <dt>0</dt>
+      <dd><code>SVG_MARKER_ORIENT_UNKNOWN</code> which means that the {{SVGattr("orient")}} attribute has a value other than the two predefined keywords.</dd>
+      <dt>1</dt>
+      <dd><code>SVG_MARKERUNITS_ORIENT_AUTO</code> which means that the {{SVGattr("orient")}} attribute has the keyword value <code>auto</code>.</dd>
+      <dt>2</dt>
+      <dd><code>SVG_MARKERUNITS_ORIENT_ANGLE</code> which means that the {{SVGattr("orient")}} attribute has an {{cssxref("angle")}} or {{cssxref("number")}} value indicating the angle.</dd>
+    </dl>
+  </dd>
+  <dt>{{domxref("SVGMarkerElement.orientAngle")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedAngle")}} object containing the angle of the {{SVGattr("orient")}} attribute.</dd>
+  <dt>{{domxref("SVGMarkerElement.refX")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedLength")}} object containing the value of the {{SVGattr("refX")}} attribute of the {{SVGElement("marker")}}.</dd>
+  <dt>{{domxref("SVGMarkerElement.refY")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedLength")}} object containing the value of the {{SVGattr("refY")}} attribute of the {{SVGElement("marker")}}.</dd>
+  <dt>{{domxref("SVGMarkerElement.viewBox")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGAnimatedRect")}} object containing an {{domxref("SVGRect")}} which contains the values set by the {{SVGattr("viewBox")}} attribute on the {{SVGElement("marker")}}.</dd>
+  <dt>{{domxref("SVGMarkerElement.preserveAspectRatio")}}{{ReadOnlyInline}}</dt>
+  <dd>Returns an {{domxref("SVGPreserveAspectRatio")}} object which contains the values set by the {{SVGattr("preserveAspectRatio")}} attribute on the {{SVGElement("marker")}} viewport.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+  <dt>{{domxref("SVGMarkerElement.setOrientToAuto()")}}</dt>
+  <dd>Sets the value of the {{SVGattr("orient")}} attribute to <code>auto</code>.</dd>
+  <dt>{{domxref("SVGMarkerElement.setOrientToAngle()")}}</dt>
+  <dd>Sets the value of the {{SVGattr("orient")}} attribute to a specific angle value.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following SVG will be referenced in the examples.</p>
+
+<pre class="brush: html">&lt;svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="90"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;</pre>
+
+<h3>Finding the Width of the Marker</h3>
+
+<p>The <code>markerWidth</code> property returns an {{domxref("SVGAnimatedLength")}} which contains an {{domxref("SVGLength")}} with the value of the {{SVGattr("markerWidth")}} attribute.</p>
+
+<pre class="brush: js">let marker = document.getElementById("arrow");
+console.log(marker.markerWidth.baseVal.value); // 6</pre>
+
+<h3>Updating the Orientation Angle</h3>
+
+<p>In the following example the value of the <code>orient</code> attribute is updated using <code>setOrientToAngle()</code> using an {{domxref("SVGAngle")}} created using {{domxref("SVGElement.createSVGAngle()")}}.</p>
+
+<pre class="brush: js">let svg = document.getElementById("svg");
+let marker = document.getElementById("arrow");
+console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
+let angle = svg.createSVGAngle();
+angle.value = "110";
+marker.setOrientToAngle(angle);
+console.log(marker.orientAngle.baseVal.value); // new value - 110</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName("SVG2", "painting.html#InterfaceSVGMarkerElement", "SVGMarkerElement")}}</td>
+    <td>{{Spec2("SVG2")}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SVGMarkerElement")}}</p>
diff --git a/files/en-us/web/api/svgmarkerelement/markerheight/index.html b/files/en-us/web/api/svgmarkerelement/markerheight/index.html
@@ -0,0 +1,61 @@
+---
+title: SVGMarkerElement.markerHeight
+slug: Web/API/SVGMarkerElement/markerHeight
+tags:
+  - API
+  - Property
+  - Reference
+  - markerHeight
+  - SVGMarkerElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p class="summary">The <strong><code>markerHeight</code></strong> read-only property of the {{domxref("SVGMarkerElement")}} interface returns an {{domxref("SVGAnimatedLength")}} object containing the height of the {{SVGElement("marker")}} viewport as defined by the {{SVGattr("markerHeight")}} attribute.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let height = SVGMarkerElement.markerHeight;</pre>
+
+<h3>Value</h3>
+<p>An {{domxref("SVGAnimatedLength")}} object. The <code>baseVal</code> property of this object returns an {{domxref("SVGLength")}}, the value of which returns the <code>height</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <code>markerHeight</code> property returns an {{domxref("SVGAnimatedLength")}} which contains an {{domxref("SVGLength")}} with the value of the {{SVGattr("markerHeight")}} attribute.</p>
+
+<pre class="brush: html">&lt;svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="auto-start-reverse"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">let marker = document.getElementById("arrow");
+console.log(marker.markerHeight.baseVal.value); // 6</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName("SVG2", "painting.html#__svg__SVGMarkerElement__markerHeight", "SVGMarkerElement.markerHeight")}}</td>
+    <td>{{Spec2("SVG2")}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SVGMarkerElement.markerHeight")}}</p>
diff --git a/files/en-us/web/api/svgmarkerelement/markerunits/index.html b/files/en-us/web/api/svgmarkerelement/markerunits/index.html
@@ -0,0 +1,71 @@
+---
+title: SVGMarkerElement.markerUnits
+slug: Web/API/SVGMarkerElement/markerUnits
+tags:
+  - API
+  - Property
+  - Reference
+  - markerUnits
+  - SVGMarkerElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p class="summary">The <strong><code>markerUnits</code></strong> read-only property of the {{domxref("SVGMarkerElement")}} interface returns an {{domxref("SVGAnimatedEnumeration")}} object. This object returns an integer which represents the keyword values that the {{SVGattr("markerUnits")}} attribute accepts.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let markerUnits = SVGMarkerElement.markerUnits;</pre>
+
+<h3>Value</h3>
+<p>An {{domxref("SVGAnimatedEnumeration")}} object. The <code>baseVal</code> property of this object contains one of the following values:</p>
+
+<dl>
+  <dt>0</dt>
+  <dd><code>SVG_MARKERUNITS_UNKNOWN</code> which means that the {{SVGattr("markerUnits")}} attribute has a value other than the two predefined keywords.</dd>
+  <dt>1</dt>
+  <dd><code>SVG_MARKERUNITS_USERSPACEONUSE</code> which means that the {{SVGattr("markerUnits")}} attribute has the keyword value <code>userSpaceOnUse</code>.</dd>
+  <dt>2</dt>
+  <dd><code>SVG_MARKERUNITS_STROKEWIDTH</code> which means that the {{SVGattr("markerUnits")}} attribute has the keyword value <code>strokeWidth</code>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <code>markerUnits</code> property returns an {{domxref("SVGAnimatedEnumeration")}} object that contains the value of the {{SVGattr("markerUnits")}} attribute.</p>
+
+<pre class="brush: html">&lt;svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="auto-start-reverse"
+        markerUnits="strokeWidth"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">let marker = document.getElementById("arrow");
+console.log(marker.markerUnits.baseVal); // 2</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName("SVG2", "painting.html#__svg__SVGMarkerElement__markerUnits", "SVGMarkerElement.markerUnits")}}</td>
+    <td>{{Spec2("SVG2")}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SVGMarkerElement.markerUnits")}}</p>
diff --git a/files/en-us/web/api/svgmarkerelement/markerwidth/index.html b/files/en-us/web/api/svgmarkerelement/markerwidth/index.html
@@ -0,0 +1,62 @@
+---
+title: SVGMarkerElement.markerWidth
+slug: Web/API/SVGMarkerElement/markerWidth
+tags:
+  - API
+  - Property
+  - Reference
+  - markerWidth
+  - SVGMarkerElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p class="summary">The <strong><code>markerWidth</code></strong> read-only property of the {{domxref("SVGMarkerElement")}} interface returns an {{domxref("SVGAnimatedLength")}} object containing the width of the {{SVGElement("marker")}} viewport as defined by the {{SVGattr("markerWidth")}} attribute.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let width = SVGMarkerElement.markerWidth;</pre>
+
+<h3>Value</h3>
+<p>An {{domxref("SVGAnimatedLength")}} object. The <code>baseVal</code> property of this object returns an {{domxref("SVGLength")}}, the value of which returns the <code>width</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <code>markerWidth</code> property returns an {{domxref("SVGAnimatedLength")}} which contains an {{domxref("SVGLength")}} with the value of the {{SVGattr("markerWidth")}} attribute.</p>
+
+<pre class="brush: html">&lt;svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="auto-start-reverse"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">let marker = document.getElementById("arrow");
+console.log(marker.markerWidth.baseVal.value); // 6</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName("SVG2", "painting.html#__svg__SVGMarkerElement__markerWidth", "SVGMarkerElement.markerWidth")}}</td>
+    <td>{{Spec2("SVG2")}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SVGMarkerElement.markerWidth")}}</p>
+
diff --git a/files/en-us/web/api/svgmarkerelement/orientangle/index.html b/files/en-us/web/api/svgmarkerelement/orientangle/index.html
@@ -0,0 +1,60 @@
+---
+title: SVGMarkerElement.orientAngle
+slug: Web/API/SVGMarkerElement/orientAngle
+tags:
+  - API
+  - Property
+  - Reference
+  - orientAngle
+  - SVGMarkerElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p class="summary">The <strong><code>orientAngle</code></strong> read-only property of the {{domxref("SVGMarkerElement")}} interface returns an {{domxref("SVGAnimatedAngle")}} object containing the angle of the {{SVGattr("orient")}} attribute.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let angle = SVGMarkerElement.orientAngle;</pre>
+
+<h3>Value</h3>
+<p>An {{domxref("SVGAnimatedAngle")}} object. The <code>baseVal</code> property of this object returns an {{domxref("SVGAngle")}}, the value of which returns the <code>angle</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <code>orientAngle</code> property returns an {{domxref("SVGAnimatedAngle")}} which contains an {{domxref("SVGAngle")}} with the angle set by the {{SVGattr("orient")}} attribute as a number representing the number of degrees the marker is turned.</p>
+
+<pre class="brush: html">&lt;svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient=".5turn"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: js">let marker = document.getElementById("arrow");
+console.log(marker.orientAngle.baseVal.value); // 180 as .5turn is 180deg.</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+   <tr>
+    <td>{{SpecName("SVG2", "painting.html#__svg__SVGMarkerElement__orientAngle", "SVGMarkerElement.orientAngle")}}</td>
+    <td>{{Spec2("SVG2")}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+ </table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.SVGMarkerElement.orientAngle")}}</p>