-
Notifications
You must be signed in to change notification settings - Fork 22.6k
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
Adds the SVGMarkerElement Interface #4990
Merged
Merged
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
f5c93ef
Adds the SVGMarkerElement Interface
rachelandrew 08f7774
Update files/en-us/web/api/svgmarkerelement/index.html
rachelandrew 6d009a7
Update files/en-us/web/api/svgmarkerelement/orienttype/index.html
rachelandrew ce08f79
Update files/en-us/web/api/svgmarkerelement/index.html
rachelandrew 5906993
Update files/en-us/web/api/svgmarkerelement/index.html
rachelandrew 79d503b
fix to code
rachelandrew 927e469
adds viewBox and preserveAspectRatio
rachelandrew c957d7c
fixing naming
rachelandrew e2f1493
clarifying orientType
rachelandrew 8cc0aeb
Update files/en-us/web/api/svgmarkerelement/index.html
rachelandrew 64275f5
Update files/en-us/web/api/svgmarkerelement/viewbox/index.html
rachelandrew fe48276
Update files/en-us/web/api/svgmarkerelement/preserveaspectratio/index…
rachelandrew 1513d38
preserveAspectRatio constants
rachelandrew 4c40ebe
Merge branch 'SVGMarkerElement' of https://github.com/rachelandrew/co…
rachelandrew File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: | ||
rachelandrew marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <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 a {{domxref("SVGRect")}} which contains the values set by the {{SVGattr("viewBox")}} attribute on the {{SVGElement("marker")}}.</dd> | ||
rachelandrew marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <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"><svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | ||
| <defs> | ||
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" | ||
| markerWidth="6" markerHeight="6" | ||
| orient="90"> | ||
| <path d="M 0 0 L 10 5 L 0 10 z" /> | ||
| </marker> | ||
| </defs> | ||
| </svg></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> | ||
61 changes: 61 additions & 0 deletions
61
files/en-us/web/api/svgmarkerelement/markerheight/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"><svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | ||
| <defs> | ||
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" | ||
| markerWidth="6" markerHeight="6" | ||
| orient="auto-start-reverse"> | ||
| <path d="M 0 0 L 10 5 L 0 10 z" /> | ||
| </marker> | ||
| </defs> | ||
| </svg></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> |
71 changes: 71 additions & 0 deletions
71
files/en-us/web/api/svgmarkerelement/markerunits/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"><svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | ||
| <defs> | ||
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" | ||
| markerWidth="6" markerHeight="6" | ||
| orient="auto-start-reverse" | ||
| markerUnits="strokeWidth"> | ||
| <path d="M 0 0 L 10 5 L 0 10 z" /> | ||
| </marker> | ||
| </defs> | ||
| </svg></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> |
62 changes: 62 additions & 0 deletions
62
files/en-us/web/api/svgmarkerelement/markerwidth/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"><svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | ||
| <defs> | ||
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" | ||
| markerWidth="6" markerHeight="6" | ||
| orient="auto-start-reverse"> | ||
| <path d="M 0 0 L 10 5 L 0 10 z" /> | ||
| </marker> | ||
| </defs> | ||
| </svg></pre> | ||
|
|
||
| <pre class="brush: js">let marker = document.getElementById("arrow"); | ||
| console.log(marker.markerWidth.baseVal.value); // 6</pre> | ||
jpmedley marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| <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> | ||
|
|
||
60 changes: 60 additions & 0 deletions
60
files/en-us/web/api/svgmarkerelement/orientangle/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"><svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | ||
| <defs> | ||
| <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" | ||
| markerWidth="6" markerHeight="6" | ||
| orient=".5turn"> | ||
| <path d="M 0 0 L 10 5 L 0 10 z" /> | ||
| </marker> | ||
| </defs> | ||
| </svg></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> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the fourth comment I've written about this property. The IDL doesn't look like it works the way you say it does. (I'm not saying you're wrong. There's just something here I don't understand.) The meaning of
SVGAnimatedEnumerationalso seems to depend on whichObject.propertyreturns it, even though the constants reuse the same integers.There's a lot of SVG to do, and I'll have to deal with this again. Let's meet so that you can explain this to me. I can't evaluate what I don't completely understand.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think my code example was incorrect on this one, I just checked it again. It's the value of baseVal, unlike
markerHeightetc. where you need to dobaseVal.valueThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added on everything the information about the value needing to be retrieved via baseVal.