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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。