SVGFEImageElement: preserveAspectRatio-Eigenschaft

Baseline Widely available

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

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 preserveAspectRatio-Eigenschaft der Schnittstelle SVGFEImageElement spiegelt das preserveAspectRatio-Attribut des angegebenen <feImage>-Elements wider.

Wert

Ein SVGAnimatedPreserveAspectRatio-Objekt.

Beispiel

Zugriff auf die `preserveAspectRatio`-Eigenschaft

html

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <defs>
    <filter id="image-filter">
      <!-- feImage element with preserveAspectRatio attribute -->
      <feImage
        href="https://via.placeholder.com/150"
        x="0"
        y="0"
        width="150"
        height="150"
        preserveAspectRatio="xMidYMid meet" />
    </filter>
  </defs>

  <!-- Rectangle with the filter applied -->
  <rect
    x="50"
    y="50"
    width="200"
    height="100"
    style="fill:blue;"
    filter="url(#image-filter)" />
</svg>

// Select the feImage element
const feImageElement = document.querySelector("feImage");

// Access the preserveAspectRatio property
console.dir(feImageElement.preserveAspectRatio); // Output: SVGAnimatedPreserveAspectRatio object

Spezifikationen

Specification
Filter Effects Module Level 1 # dom-svgfeimageelement-preserveaspectratio

Browser-Kompatibilität

Siehe auch

preserveAspectRatio