-
Notifications
You must be signed in to change notification settings - Fork 22.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Document SVGClipPathElement.(clipPathUnits|transform) (#25340)
Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com>
- Loading branch information
1 parent
150692a
commit cce0046
Showing
7 changed files
with
329 additions
and
93 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
files/en-us/web/api/svganimatedenumeration/animval/index.md
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,73 @@ | ||
| --- | ||
| title: SVGAnimatedEnumeration.animVal | ||
| slug: Web/API/SVGAnimatedEnumeration/animVal | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGAnimatedEnumeration.animVal | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`animVal`** property of the {{domxref("SVGAnimatedEnumeration")}} interface contains the current value of an SVG enumeration. If there is no animation, it is the same value as the {{domxref("SVGAnimatedEnumeration.baseVal", "baseVal")}}. | ||
|
|
||
| ## Value | ||
|
|
||
| An integer containing the current value of the enumeration | ||
|
|
||
| ## Examples | ||
|
|
||
| ```css hidden | ||
| html, | ||
| body, | ||
| svg { | ||
| height: 100%; | ||
| } | ||
| ``` | ||
|
|
||
| ```html | ||
| <div> | ||
| <svg viewbox="0 0 100 100" width="200" height="200"> | ||
| <clipPath id="clip1" clipPathUnits="userSpaceOnUse"> | ||
| <animate | ||
| attributeName="clipPathUnits" | ||
| values="userSpaceOnUse;objectBoundingBox;userSpaceOnUse" | ||
| dur="2s" | ||
| repeatCount="indefinite" /> | ||
| <circle cx="50" cy="50" r="25" /> | ||
| </clipPath> | ||
|
|
||
| <rect id="r1" x="0" y="0" width="50" height="100" /> | ||
|
|
||
| <use clip-path="url(#clip1)" xlink:href="#r1" fill="lightblue" /> | ||
| </svg> | ||
| </div> | ||
| <pre id="log"></pre> | ||
| ``` | ||
|
|
||
| ```js | ||
| const clipPath1 = document.getElementById("clip1"); | ||
| const log = document.getElementById("log"); | ||
|
|
||
| function displayLog() { | ||
| const animValue = clipPath1.clipPathUnits.animVal; | ||
| const baseValue = clipPath1.clipPathUnits.baseVal; | ||
| log.textContent = `The 'clipPathUnits.animVal' is ${animValue}.\n`; | ||
| log.textContent += `The 'clipPathUnits.baseVal' is ${baseValue}.`; | ||
| requestAnimationFrame(displayLog); | ||
| } | ||
|
|
||
| displayLog(); | ||
| ``` | ||
|
|
||
| {{EmbedLiveSample("Examples", "280", "260")}} | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGAnimatedEnumeration.baseVal")}} |
48 changes: 48 additions & 0 deletions
48
files/en-us/web/api/svganimatedenumeration/baseval/index.md
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,48 @@ | ||
| --- | ||
| title: SVGAnimatedEnumeration.baseVal | ||
| slug: Web/API/SVGAnimatedEnumeration/baseVal | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGAnimatedEnumeration.baseVal | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`baseVal`** property of the {{domxref("SVGAnimatedEnumeration")}} interface contains the initial value of an SVG enumeration. | ||
|
|
||
| ## Value | ||
|
|
||
| An integer containing the initial value of the enumeration | ||
|
|
||
| ## Examples | ||
|
|
||
| Considering this snippet with a {{SVGElement("clipPath")}} element: Its {{SVGAttr("clipPathUnits")}} is associated with a {{domxref("SVGAnimatedEnumeration")}} object. | ||
|
|
||
| ```html | ||
| <svg viewbox="0 0 100 100" width="200" height="200"> | ||
| <clipPath id="clip1" clipPathUnits="userSpaceOnUse"> | ||
| <circle cx="50" cy="50" r="35" /> | ||
| </clipPath> | ||
|
|
||
| <!-- Some reference rect to materialized to clip path --> | ||
| <rect id="r1" x="0" y="0" width="45" height="45" /> | ||
| </svg> | ||
| ``` | ||
|
|
||
| This snippet gets the element, and logs the `baseVal`of the {{domxref("SVGClipPathElement.clipPathUnits")}} property. | ||
|
|
||
| ```js | ||
| const clipPathElt = document.getElementById("clip1"); | ||
| console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGAnimatedEnumeration.animVal")}} |
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
87 changes: 87 additions & 0 deletions
87
files/en-us/web/api/svgclippathelement/clippathunits/index.md
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,87 @@ | ||
| --- | ||
| title: SVGClipPathElement.clipPathUnits | ||
| slug: Web/API/SVGClipPathElement/clipPathUnits | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGClipPathElement.clipPathUnits | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The read-only **`clipPathUnits`** property of the {{domxref("SVGClipPathElement")}} interface reflects the {{SVGAttr("clipPathUnits")}} attribute of a {{SVGElement("clipPath")}} element which defines the coordinate system to use for the content of the element. | ||
|
|
||
| > **Note:** Although this property is read-only, it is merely a container for two values you can modify, {{domxref("SVGAnimatedEnumeration.baseVal", "baseVal")}} and {{domxref("SVGAnimatedEnumeration.animVal", "animVal")}}. | ||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedEnumeration")}} representing the coordinate system. The possible values are defined in the {{domxref("SVGUnitTypes")}} interface: | ||
|
|
||
| - `0` (`SVG_UNIT_TYPE_UNKWOWN`) | ||
| - : The type is not one of the predefined type. | ||
| - `1` (`SVG_UNIT_TYPE_USERSPACEONUSE`) | ||
| - : Corresponds to a value of `userSpaceOnUse` for the {{SVGAttr("clipPathUnits")}} attribute and means that all coordinates inside the element refer to the user coordinate system as defined when the clipping path was created. It is the default value. | ||
| - `2` (`SVG_UNIT_TYPE_OBJECTBOUNDINGBOX`) | ||
| - : Corresponds to a value of `objectBoundingBox` for the attribute and means that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value. | ||
|
|
||
| ## Examples | ||
|
|
||
| ```css hidden | ||
| html, | ||
| body, | ||
| svg { | ||
| height: 100%; | ||
| } | ||
| ``` | ||
|
|
||
| ```html | ||
| <div> | ||
| <svg viewbox="0 0 100 100" width="200" height="200"> | ||
| <clipPath id="clip1" clipPathUnits="userSpaceOnUse"> | ||
| <circle cx="50" cy="50" r="35" /> | ||
| </clipPath> | ||
|
|
||
| <clipPath id="clip2" clipPathUnits="objectBoundingBox"> | ||
| <circle cx=".5" cy=".5" r=".35" /> | ||
| </clipPath> | ||
|
|
||
| <!-- Some reference rect to materialized to clip path --> | ||
| <rect id="r1" x="0" y="0" width="45" height="45" /> | ||
| <rect id="r2" x="0" y="55" width="45" height="45" /> | ||
| <rect id="r3" x="55" y="55" width="45" height="45" /> | ||
| <rect id="r4" x="55" y="0" width="45" height="45" /> | ||
|
|
||
| <!-- The first 3 rect are clipped with userSpaceOnUse units --> | ||
| <use clip-path="url(#clip1)" xlink:href="#r1" fill="red" /> | ||
| <use clip-path="url(#clip1)" xlink:href="#r2" fill="blue" /> | ||
| <use clip-path="url(#clip1)" xlink:href="#r3" fill="yellow" /> | ||
|
|
||
| <!-- The last rect is clipped with objectBoundingBox units --> | ||
| <use clip-path="url(#clip2)" xlink:href="#r4" fill="green" /> | ||
| </svg> | ||
| </div> | ||
| <pre id="log"></pre> | ||
| ``` | ||
|
|
||
| ```js | ||
| const clipPath1 = document.getElementById("clip1"); | ||
| const clipPath2 = document.getElementById("clip2"); | ||
|
|
||
| const log = document.getElementById("log"); | ||
|
|
||
| log.textContent = `The clipPath used three times has a 'clipPathUnits' value of ${clipPath1.clipPathUnits.baseVal} | ||
| The clipPath used three times has a 'clipPathUnits' value of ${clipPath2.clipPathUnits.baseVal}`; | ||
| ``` | ||
|
|
||
| {{EmbedLiveSample("Examples", "280", "260")}} | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{SVGAttr("clipPathUnits")}} | ||
| - {{SVGElement("clipPath")}} |
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
Oops, something went wrong.