SVG text-rendering屬性用法及代碼示例

text-rendering屬性提供有關在呈現文本時應簽訂哪些合同的提示。它僅對文本元素有效。

用法:

text-renderring = auto | optimizeLegibility |
              geometricPrecision | optimizeSpeed

屬性值：text-rendering屬性接受上麵提到和下麵描述的值：

auto:它表明用戶代理應製定適當的合同以平衡幾何精度，易讀性和速度。
optimizeSpeed:它表明用戶代理應專注於渲染速度，而不是幾何精度和可讀性。
optimizeLegibility:它表明用戶代理必須專注於幾何精度和渲染速度的易讀性。
geometricPrecision:它表明用戶代理應將重點放在幾何精度上，而不是渲染速度和可讀性上。

範例1：下麵的示例說明了text-rendering屬性的用法

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
        font-size:50px;  
        text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 140 40" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text y="15" text-rendering
            ="geometricPrecision"> 
            Geometric precis 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：下麵的示例說明了text-rendering屬性的用法

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
        font-size:50px;  
        text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 140 40" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <text y="15" text-rendering
            ="optimizeLegibility"> 
            Optimized legibility 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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