CSS shape-rendering用法及代碼示例

shape-rendering屬性用於提示渲染器有關在渲染諸如圓形，矩形或路徑之類的形狀時必須進行的取舍。在某些情況下，可以告訴渲染器使形狀幾何精確，或優化形狀以加快渲染速度。

用法:

shape-rendering:auto | optimizeSpeed | crispEdges | geometricPrecision | initial | inherit

屬性值：

auto:它用於指示用戶代理將自動做出決定以平衡速度，具有清晰的邊或具有良好的幾何精度。通常，良好的精度比速度和清晰的邊更為重要。這是默認值。

例：

<!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>

輸出：將crispEdges值與auto值進行比較
auto

optimizeSpeed:它用於表示將以某種方式渲染形狀，以強調速度超過幾何精度或邊清晰。這可能會導致用戶代理關閉所有形狀的anti-aliasing。

例：

<!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" cy="125" r="100"/> 
      <circle class="shape-optimizespeed"
        cx="350" cy="125" r="100"/> 
    </svg> 
  </div> 
</body> 
</html>

輸出：將自動值與optimizeSpeed值進行比較

crispEdges:它用於指示形狀的渲染，重點是幹淨邊的幾何對比度或速度上的對比。用戶代理可以關閉anti-aliasing的形狀，並調整線的位置和寬度以與設備的像素對齊。

例：

<!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>

輸出：將自動值與crissEdges值進行比較
crispEdges

geometricPrecision:它用於指示形狀將以幾何精度呈現，而不是集中在速度或清晰邊上。

例：

<!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>

輸出：將crispEdges值與geometryPrecision值進行比較
geometricPrecision

initial:用於將屬性設置為其默認值。

例：

<!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>

輸出：將舍入值與初始值進行比較
initial

inherit:它用於將屬性設置為從其父元素繼承。

支持的瀏覽器：shape-rendering屬性支持的瀏覽器如下所示：

chrome
火狐瀏覽器
蘋果瀏覽器
Opera
Internet Explorer 9

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 CSS | shape-rendering Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。