在线文档教程
SVG
属性 | Attributes

text-rendering(文本显示)

text-rendering

SVG内容的创建者可能想提供一个关于在浏览器渲染文本时做什么折衷的暗示。该text-rendering属性提供了这些提示。

作为一个表现属性,它也可以作为一个属性直接在一个CSS样式表,请参阅css text-rendering进一步的信息

用法说明

分类呈现属性
自动| optimizeSpeed | optimizeLegibility | geometricPrecision | 继承
动画
规范性文件SVG 1.1(第二版)

auto浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该值在不同浏览器中解释的差异,请看兼容性表。

例子

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="660" height="40" text-rendering="optimizeLegibility"> <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> <style> text {font: 30px 'Sofadi One', cursive;} </style> <g> <text y="30">The quick brown fox jumps over the lazy dog.</text> </g> </svg>

optimizeLegibility (first) и geometricPrecision (second)

Similarly acts css text-rendering

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="660" height="40"> <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> <style> text { font: 30px 'Sofadi One', cursive; text-rendering: optimizeLegibility; } </style> <g> <text y="30">The quick brown fox jumps over the lazy dog.</text> </g> </svg>

元素

以下元素可以使用该text-rendering属性

  • <text>See also

  • css text-rendering

Edit this page on MDN

© 2005–2017 Mozilla Developer Network and individual contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering