SVGSymbolElement: 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.
Thuộc tính chỉ đọc preserveAspectRatio của giao diện SVGSymbolElement phản ánh thuộc tính preserveAspectRatio của phần tử <symbol> tương ứng. Nó xác định cách nội dung của symbol nên được co giãn để phù hợp với không gian cho trước, đồng thời duy trì tỷ lệ khung hình.
Giá trị
Một đối tượng SVGAnimatedPreserveAspectRatio.
Ví dụ
Với SVG sau, chúng ta có thể sử dụng thuộc tính preserveAspectRatio để truy xuất hành vi co giãn cho phần tử symbol:
html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<symbol
id="exampleSymbol"
viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="50" fill="blue" />
</symbol>
</defs>
<use href="#exampleSymbol" x="50" y="50" width="100" height="100" />
</svg>
Chúng ta có thể truy cập thuộc tính preserveAspectRatio:
js
const symbolElement = document.getElementById("exampleSymbol");
// Truy cập thuộc tính preserveAspectRatio
const aspectRatio = symbolElement.preserveAspectRatio.baseVal;
console.log(aspectRatio.align); // Kết quả: 2 (xMinYMin)
console.log(aspectRatio.meetOrSlice); // Kết quả: 1 (meet)
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__preserveAspectRatio |