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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。