Thuộc tính shape-rendering được dùng để gợi ý cho trình duyệt cách hiển thị các hình dạng.
Các hình dạng như hình tròn, hình chữ nhật hoặc đường dẫn sẽ được hiển thị theo cách tối ưu.
Trình duyệt có thể hiển thị hình dạng một cách chính xác về mặt hình học, hoặc tối ưu hóa để tăng tốc độ.
Cú pháp:
shape-rendering: auto | optimizeSpeed | crispEdges | geometricPrecision | initial | inherit
Giá trị thuộc tính:
- auto: Chỉ ra rằng trình duyệt sẽ tự động quyết định cân bằng giữa tốc độ, cạnh sắc nét hoặc độ chính xác hình học. Thông thường, độ chính xác tốt được ưu tiên hơn tốc độ và cạnh sắc nét. Đây là giá trị mặc định.
- optimizeSpeed: Hình dạng sẽ được hiển thị sao cho ưu tiên tốc độ hơn độ chính xác hình học hoặc cạnh sắc nét. Điều này có thể khiến trình duyệt tắt tính năng khử răng cưa cho tất cả các hình dạng.
- crispEdges: Hình dạng sẽ được hiển thị với sự nhấn mạnh vào độ tương phản của các cạnh sạch hơn là độ chính xác hình học hoặc tốc độ. Trình duyệt có thể tắt tính năng khử răng cưa và điều chỉnh vị trí, độ rộng đường kẻ để phù hợp với pixel.
- initial: Sử dụng để đặt thuộc tính về giá trị mặc định của nó.
- inherit: Sử dụng để đặt thuộc tính kế thừa từ phần tử cha của nó.
- geometricPrecision: Hình dạng sẽ được hiển thị với độ chính xác hình học cao, không tập trung vào tốc độ hoặc cạnh sắc nét.
Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | shape-rendering property
</title>
<style>
.shape-crisp {
/* Assume the crispEdges
value for demonstration */
shape-rendering: crispEdges;
fill: green;
}
.shape-auto {
shape-rendering: auto;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | shape-rendering
</b>
<div class="container">
<svg height="250px"
width="500px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="shape-crisp"
cx="100"
cy="125"
r="100" />
<circle class="shape-auto"
cx="350"
cy="125"
r="100" />
</svg>
</div>
</body>
</html>
Kết quả: So sánh giá trị crispEdges với giá trị auto.
Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | shape-rendering property
</title>
<style>
.shape-auto {
/* Assume the auto
value for demonstration */
shape-rendering: auto;
fill: green;
}
.shape-optimizespeed {
shape-rendering: optimizeSpeed;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | shape-rendering
</b>
<div class="container">
<svg height="250px"
width="500px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="shape-auto"
cx="100" c
y="125"
r="100" />
<circle class="shape-optimizespeed"
cx="350"
cy="125"
r="100" />
</svg>
</div>
</body>
</html>
Kết quả: So sánh giá trị auto với giá trị optimizeSpeed.
.
Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | shape-rendering property
</title>
<style>
.shape-auto {
/* Assume the auto
value for demonstration */
shape-rendering: auto;
fill: green;
}
.shape-crisp {
shape-rendering: crispEdges;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | shape-rendering
</b>
<div class="container">
<svg height="250px"
width="500px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="shape-auto"
cx="100"
cy="125"
r="100" />
<circle class="shape-crisp"
cx="350"
cy="125"
r="100" />
</svg>
</div>
</body>
</html>
Kết quả: So sánh giá trị auto với giá trị crispEdges.
Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | shape-rendering property
</title>
<style>
.shape-auto {
/* Assume the auto
value for demonstration */
shape-rendering: auto;
fill: green;
}
.shape-crisp {
shape-rendering: geometricPrecision;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | shape-rendering
</b>
<div class="container">
<svg height="250px"
width="500px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="shape-auto"
cx="100"
cy="125"
r="100" />
<circle class="shape-crisp"
cx="350"
cy="125"
r="100" />
</svg>
</div>
</body>
</html>
Kết quả: So sánh giá trị crispEdges với giá trị geometricPrecision.
Ví dụ: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | shape-rendering
</title>
<style>
.shape-crisp {
/* Assume the crispEdges
value for demonstration */
shape-rendering: crispEdges;
fill: green;
}
.shape-initial {
shape-rendering: initial;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | shape-rendering
</b>
<div class="container">
<svg height="250px"
width="500px"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<circle class="shape-crisp"
cx="100"
cy="125"
r="100" />
<circle class="shape-initial"
cx="350"
cy="125"
r="100" />
</svg>
</div>
</body>
</html>
Kết quả: So sánh giá trị round với giá trị initial.
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính shape-rendering được liệt kê dưới đây:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9