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