SVGClipPathElement: transform プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

transform は SVGClipPathElement インターフェイスの読み取り専用プロパティで、 <clipPath> 要素の transform 属性(この要素に適用される座標変換のリスト)を反映します。

値

SVGTransformList です。

例

html,
body,
svg {
 height: 100%;
}

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>

const translateType = [
 "unknown",
 "matrix()",
 "translate()",
 "scale()",
 "rotate()",
 "skewx()",
 "skewy()",
];
const clipPath1 = document.getElementById("clip1");
const log = document.getElementById("log");
let result = "次の座標変換が適用されています。\n";
for (const transform of clipPath1.transform.baseVal) {
 result += `- '${translateType[transform.type]}' 型の座標変換が見つかりました。\n`;
}
log.textContent = result;

[フレーム]