SVGAnimatedPreserveAspectRatio: thuộc tính baseVal

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.

Thuộc tính chỉ đọc baseVal của giao diện SVGAnimatedPreserveAspectRatio đại diện cho giá trị cơ sở (không hoạt hình) của thuộc tính preserveAspectRatio của phần tử SVG.

Ví dụ

Xem xét SVG sau:

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <image
    id="myImage"
    href="crows.jpg"
    width="50"
    height="50"
    preserveAspectRatio="xMinYMin meet">
    <animate
      attributeName="preserveAspectRatio"
      from="xMinYMin meet"
      to="xMaxYMax slice"
      dur="5s"
      fill="freeze"
      repeatCount="1" />
  </image>
</svg>

Ví dụ này định nghĩa một phần tử <image> hoạt hình thuộc tính preserveAspectRatio. Hoạt hình chạy một lần và đặt thuộc tính fill thành "freeze", do đó hiệu ứng của hoạt hình được duy trì sau khi hoạt hình kết thúc.

Chúng ta chạy đoạn code sau ngay khi trang tải:

const image = document.querySelector("#myImage");
const baseVal = image.preserveAspectRatio.baseVal;
const animVal = image.preserveAspectRatio.animVal;

console.log(baseVal.meetOrSlice); // Đầu ra: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Đầu ra: 1 (SVG_MEETORSLICE_MEET)

Nếu chúng ta ghi lại các giá trị của animVal.meetOrSlice và baseVal.meetOrSlice sau khi hoạt hình kết thúc, chúng ta sẽ thấy điều sau:

console.log(baseVal.meetOrSlice); // Đầu ra: 1 (SVG_MEETORSLICE_MEET)
console.log(animVal.meetOrSlice); // Đầu ra: 2 (SVG_MEETORSLICE_SLICE)

Lưu ý rằng nếu chúng ta đặt fill thành "remove" (hoặc xóa fill hoàn toàn, vì "remove" là mặc định) thì các hiệu ứng hoạt hình sẽ bị xóa khi hoạt hình hoàn tất, và animVal.meetOrSlice sẽ quay lại 1.