← 返回首页
SVGMaskElement: height プロパティ - Web API | MDN

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

SVGMaskElement: height プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

heightSVGMaskElement インターフェイスの読み取り専用プロパティで、 SVGAnimatedLength オブジェクトとして <mask> 要素の height 属性の値を返します。

メモ: このプロパティは読み取り専用ですが、変更可能な 2 つの値、 baseVal および animVal を格納する単なるコンテナーです。

In this article

SVGAnimatedLength オブジェクトです。このオブジェクトの baseVal プロパティは、 SVGLength で height の値を返します。

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="height" 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.height.animVal.value; const baseValue = mask.height.baseVal.value; log.textContent = `The 'height.animVal' is ${animValue}.\n`; log.textContent += `The 'height.baseVal' is ${baseValue}.`; requestAnimationFrame(displayLog); } displayLog();

仕様書

Specification
CSS Masking Module Level 1
# dom-svgmaskelement-height

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.