shape-rendering
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´7æâ©.
æå® SVG å
ç´ <path> ç渲æ模å¼ã
使ç¨åè
| ç±»å | å¤è§å±æ§ |
|---|---|
| å¼ | auto | optimizeSpeed | crispEdges | geometricPrecision | inherit |
| å¯è¿å¨ | Yes |
- auto
-
让æµè§å¨èªå¨æ衡渲æé度ãå¹³æ»åº¦ã精确度ãé»è®¤æ¯å¾åäºç²¾ç¡®åº¦èéå¹³æ»åº¦åé度ã
- optimizeSpeed
-
åå渲æé度ï¼æµè§å¨ä¼å ³éåé¯é½¿æ¨¡å¼ãï¼é度ï¼
- crispEdges
-
ååæ´å æ¸ æ°éå©çè¾¹ç¼ç渲æãæµè§å¨å¨æ¸²æçæ¶åä¼å ³éåé¯é½¿æ¨¡å¼ï¼ä¸ä¼è®©çº¿æ¡çä½ç½®å宽度åæ¾ç¤ºå¨è¾¹ç¼å¯¹é½ãï¼é度ï¼
- geometricPrecision
-
åå渲æå¹³æ»çæ²çº¿ãï¼å¹³æ»ï¼
示ä¾
xml
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="100" height="100"
shape-rendering="optimizeSpeed"><!-- è¿ä¸ªç¤ºä¾å¨ Firefox ä¸çåºå«æ´ææ¾ -->
shape-rendering: geometricPrecision: |
shape-rendering: optimizeSpeed |
|---|
åæ ·ï¼ä½ ä¹å¯ä»¥å¨ CSS æ ·å¼ä¸ä½¿ç¨ shape-rendering:
xml
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="100" height="100"
style="shape-rendering:optimizeSpeed;">
å ³èå ç´
ä¸é¢çå ç´ å¯ä»¥ä½¿ç¨è¿ä¸ªå±æ§
è§è
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ShapeRendering |