SVGClipPathElement: Transform-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.
Die schreibgeschützte transform
-Eigenschaft der SVGClipPathElement
-Schnittstelle spiegelt das transform
-Attribut eines <clipPath>
-Elements wider, das eine Liste von auf das Element angewendeten Transformationen ist.
Wert
Ein SVGTransformList
.
Beispiele
html
<div>
<svg viewBox="0 0 100 100" width="200" height="200">
<clipPath
id="clip1"
clipPathUnits="objectBoundingBox"
transform="skewX(40) scale(1 0.5)">
<circle cx=".5" cy=".5" r=".35" />
</clipPath>
<rect id="r1" x="0" y="0" width="100" height="100" />
<use clip-path="url(#clip1)" href="#r1" fill="lightblue" />
</svg>
</div>
<pre id="log"></pre>
js
const translateType = [
"unknown",
"matrix()",
"translate()",
"scale()",
"rotate()",
"skewx()",
"skewy()",
];
const clipPath1 = document.getElementById("clip1");
const log = document.getElementById("log");
let result = "The following transformation have been applied:\n";
for (const transform of clipPath1.transform.baseVal) {
result += `- A transform of type '${translateType[transform.type]}' found.\n`;
}
log.textContent = result;
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # dom-svgclippathelement-transform |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.