このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
SVGMaskElement: width プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
width は SVGMaskElement インターフェイスの読み取り専用プロパティで、 SVGAnimatedLength オブジェクトとして <mask> 要素の width 属性の値を返します。
値
SVGAnimatedLength オブジェクトです。このオブジェクトの baseVal プロパティは、 SVGLength で width の値を返します。
例
html,
body,
svg {
height: 100%;
}
html
<div>
<svg viewBox="-10 -10 120 120" width="100" height="100">
<mask id="mask" x="0" maskUnits="objectBoundingBox">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black" />
<animate
attributeName="width"
values="144;0;144"
dur="5s"
repeatCount="indefinite" />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<circle cx="50" cy="50" r="50" mask="url(#mask)" />
</svg>
</div>
<pre id="log"></pre>
js
const mask = document.getElementById("mask");
function displayLog() {
const animValue = mask.width.animVal.value;
const baseValue = mask.width.baseVal.value;
log.textContent = `The 'width.animVal' is ${animValue}.\n`;
log.textContent += `The 'width.baseVal' is ${baseValue}.`;
requestAnimationFrame(displayLog);
}
displayLog();
[フレーム]
仕様書
| 仕様書 |
|---|
| CSS Masking Module Level 1 # dom-svgmaskelement-width |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。