SVGFEImageElement: preserveAspectRatio property
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.
ThepreserveAspectRatio read-only property of theSVGFEImageElement interface reflects thepreserveAspectRatio attribute of the given<feImage> element.
Value
AnSVGAnimatedPreserveAspectRatio object.
Example
Accessing thepreserveAspectRatio property
html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <defs> <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" fill="blue" filter="url(#image-filter)" /></svg>js
// Select the feImage elementconst feImageElement = document.querySelector("feImage");// Access the preserveAspectRatio propertyconsole.dir(feImageElement.preserveAspectRatio); // Output: SVGAnimatedPreserveAspectRatio objectSpecifications
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfeimageelement-preserveaspectratio |