Spec-Zone.ru › Web APIs

Элемент SVGMaskElement: свойство height

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

Чтение только свойство height интерфейса SVGMaskElement возвращает объект SVGAnimatedLength, содержащий значение атрибута height элемента <marker>.

Примечание: Хотя это свойство является только для чтения, оно просто содержит два значения, которые можно изменить, baseVal и animVal.

Значение

Объект SVGAnimatedLength. Свойство baseVal этого объекта возвращает SVGLength, значение которого возвращает значение height.

Примеры

<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>
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();

Спецификации

Спецификация
Модуль CSS-маскирования уровень 1
# dom-svgmaskelement-height

Совместимость браузеров

Рабочий стол Мобильный
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet WebView Android
height 1 12 3 ≤12.1 3 18 4 ≤12.1 1 1.0 3

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGMaskElement/height

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API