SVGMaskElement: y-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 2020.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

Die schreibgeschützte y-Eigenschaft der Schnittstelle SVGMaskElement gibt ein SVGAnimatedLength-Objekt zurück, das den Wert des Attributs y des <marker> enthält. Es repräsentiert die y-Achsen-Koordinate der oberen linken Ecke des Maskierungsbereichs.

Hinweis: Obwohl diese Eigenschaft schreibgeschützt ist, ist sie lediglich ein Container für zwei Werte, die Sie ändern können: baseVal und animVal.

Wert

Ein SVGAnimatedLength-Objekt. Die baseVal-Eigenschaft dieses Objekts gibt ein SVGLength-Objekt zurück, dessen Wert den y-Wert liefert.

Beispiele

html
<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="userSpaceOnUse">
      <!-- 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="y"
        values="0;80;0"
        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.y.animVal.value;
  const baseValue = mask.y.baseVal.value;
  log.textContent = `The 'y.animVal' is ${animValue}.\n`;
  log.textContent += `The 'y.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();

Spezifikationen

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

Browser-Kompatibilität