TÌM HIỂU SVG VÀ ỨNG DỤNG - 6

Chương 3. Cấu trúc định dạng tập tin SVG là nó thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các thành phần con của thành phần chứa tính ‘viewBox’. 3.12.7 Thuộc tính ‘preserveAspectRatio’ Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình (hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ). Trong một số trường hợp khác thì lại...
Nội dung trích xuất từ tài liệu:
TÌM HIỂU SVG VÀ ỨNG DỤNG - 6 Chương 3. Cấu trúc định dạng tập tin SVG là nó thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các thành phần con của thành phần chứa tính ‘viewBox’. 3.12.7 Thuộc tính ‘preserveAspectRatio’ Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình (hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ). Trong một số trường hợp khác thì lại muốn các cạnh co dãn với cùng tỉ lệ để đảm bảo tỉ lệ cạnh của hình (hình mới đồng dạng với hình nguyên thủy). Thuộc tính ‘preserveAspectRatio= “[defer][]”, chỉ áp dụng trong các thành phần thiết lập khung nhìn mới, thành phần ‘marker’, ‘pattern’, ‘view’, dùng để chỉ định có cần co dãn tỉ lệ các chiều đồng nhất hay không. Thuộc tính ‘preserveAspectRatio’ chỉ dùng khi thuộc tính ‘viewBox’ được thiết lập, ngược lại thuộc tính này bị bỏ qua. Đối với thành phần ‘image’, thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ xác định có cần bảo toàn tỉ lệ cạnh của ảnh được tham chiếu khi hiển thị hay không. Nếu giá trị của thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ bắt đầu với giá trị ‘defer’ thì giá trị của thuộc ‘preserveAspectRatio’ (nếu có) trong nội dung được tham chiếu sẽ được dùng . Nếu nội dung được tham chiếu không có giá trị thuộc tính ‘preserveAspectRatio’ thì thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ sẽ được xử lý bình thường – bỏ qua giá trị ‘defer’. Đối với các thành phần khác thành phần ‘image’ thì giá trị ‘defer’ trên thuộc tính ‘preserveAspectRatio’ sẽ bị bỏ qua. Tham số (canh lề) xác định có cần đảm bảo tỉ lệ các chiều hay không, nếu nó thuộc tính được thiết lập thì phương thức canh lề được dùng khi tỉ lệ cạnh trong thuộc tính ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn. Tham số phải là một trong các giá trị sau: 100 Chương 3. Cấu trúc định dạng tập tin SVG • none – không cần bảo toàn tỉ lệ cạnh. Nếu nhận giá trị ‘none’ thì tuỳ chọn sẽ bị bỏ qua. • xMinYMin - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMidYMin-Cần bảo toàn tỉ lệ cạnh o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X điểm giữa của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMaxYMin-Cần bảo toàn tỉ lệ cạnh o Giá trị + của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất của khung nhìn. • xMinYMid-Cần bảo toàn tỉ lệ cạnh o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm giữa của khung nhìn. • xMidYMid-Cần bảo toàn tỉ lệ cạnh o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X điểm giữa của khung nhìn. 101 Chương 3. Cấu trúc định dạng tập tin SVG o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm giữa của khung nhìn. • xMaxYMid - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị Y của điểm giữa của ‘viewBox’ canh trùng với giá trị Y của điểm giữa của khung nhìn. • xMinYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị của ‘viewBox’ canh trùng với giá trị X nhỏ nhất của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. • xMidYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X của điểm giữa của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. • xMaxYMax - Cần bảo toàn tỉ lệ cạnh. o Giá trị + của ‘viewBox’ canh trùng với giá trị X lớn nhất của khung nhìn. o Giá trị + của ‘viewBox’ canh trùng với giá trị Y lớn nhất của khung nhìn. Tham số là tham số tuỳ chọn, nếu được cung cấp, nó sẽ được tách biệt với giá trị bởi một hay nhiều khoảng trắng. 102 Chương 3. Cấu trúc định dạng tập tin SVG • meet (mặc định) : o Bảo toàn tỉ lệ cạnh o Toàn bộ ‘viewBox’ hiển thị trong khung nhìn o ‘viewBox’ được dãn to hết mức có thể trong khi vẫn đảm bảo các ràng buộc khác. Trong trường hợp này, nếu tỉ lệ cạnh của ảnh không khớp với khung nhìn, thì khung nhìn lớn hơn ‘viewBox’. • slice: o Bảo toàn tỉ lệ cạnh o ‘viewBox’ sẽ chiếm toàn bộ khung nhìn o ‘viewBox’ được co lại nhỏ nhất có thể, trong khi vẫn đảm bảo các ràng buộc khác Trong trường hợp này, nếu tỉ lệ cạnh của ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn thì một phần của ‘viewBox’ không hiển thị trong khung nhìn. Ví dụ 1: Ví dụ sau chứ ...