SVG shape-rendering属性用法及代码示例

shape-rendering属性提示渲染器在渲染诸如路径，圆形或矩形之类的形状时要进行的取舍。它仅对以下元素有效：<circle>，<ellipse>，<line>，<path>，<polygon>，<polyline>和<rect>。

用法:

shape-rendering = auto | optimizeSpeed | crispEdges 
                       | geometricPrecision

属性值：shape-rendering属性接受上面提到和下面描述的值：

auto:该值使用户代理可以自动决定是否平衡速度，具有清晰的边或具有良好的几何精度。如果未指定任何内容，那么该值将作为默认值。
optimizeSpeed:该值使用户代理可以指定将以某种方式渲染形状，以强调速度超过几何精度或清晰边。
crispEdges:该值使用户代理可以指定要渲染的形状，重点是干净边的几何精度或速度上的对比。
geometricPrecision:该值使用户代理可以指定将以几何精度呈现形状，而不是关注速度或明快边。

范例1：下面的示例说明了使用geometricPrecision属性值使用的shape-rendering属性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;  
             margin-left:50px;"> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 0 420 100" 
            xmlns="http://www.w3.org/2000/svg"> 
              
            <polygon points="26, 86 11.2, 40.4 50,  
                12.2 88.8, 40.4 74, 86" fill="green"
                shape-rendering="geometricPrecision" /> 
        </svg> 
    </div> 
</body> 
  
</html>

输出：

范例2：下面的示例使用crissEdges属性值说明了shape-rendering属性的使用。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color:green;  
               margin-left:50px;"> 
  
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 420 100" 
            xmlns="http://www.w3.org/2000/svg"> 
              
            <polygon points="26, 86 11.2, 40.4  
                50, 12.2 88.8, 40.4 74, 86"  
                fill="green" 
                shape-rendering="crispEdges" /> 
        </svg> 
    </div> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG shape-rendering Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。