<view>
åºçº¿
广æ³å¯ç¨
*
èª 2018å¹´10æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
<view> SVG å
ç´ å®ä¹äº SVG ææ¡£çç¹å®è§å¾ãå¯ä»¥éè¿å° <view> å
ç´ ç id ä½ä¸º URL çç®æ ç段æ¥æ¾ç¤ºç¹å®çè§å¾ã
使ç¨ä¸ä¸æ
| ç±»å« | æ |
|---|---|
| å 许çå 容 | ä»»ææ°éãä»»æ顺åºçä¸åå
ç´ ï¼ æè¿°æ§å ç´ |
å±æ§
preserveAspectRatio-
该å±æ§å®ä¹äºå½ SVG ç段åµå ¥å°å ·æä¸å纵横æ¯ç容å¨ä¸æ¶åºå¦ä½åå½¢ãå¼ç±»åï¼(
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?ï¼é»è®¤å¼ï¼xMidYMid meetï¼å¨ç»æ§ï¼æ¯ viewBox-
该å±æ§å®ä¹äºæ¨¡å¼ç段ç SVG è§å£è¾¹çãå¼ç±»åï¼<list-of-numbers>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼æ¯
zoomAndPan-
æ¤å±æ§æå® SVG ææ¡£æ¯å¦å¯ä»¥è¢«æ¾å¤§å平移ãå¼ç±»åï¼disable | magnifyï¼é»è®¤å¼ï¼magnifyï¼å¨ç»æ§ï¼å¦
示ä¾
SVG
<svg viewBox="0 0 300 100" width="300" height="100"
xmlns="http://www.w3.org/2000/svg">
<view id="one" viewBox="0 0 100 100" />
<circle cx="50" cy="50" r="40" fill="red" />
<view id="two" viewBox="100 0 100 100" />
<circle cx="150" cy="50" r="40" fill="green" />
<view id="three" viewBox="200 0 100 100" />
<circle cx="250" cy="50" r="40" fill="blue" />
</svg>
HTML
<img src="example.svg" alt="ä¸ä¸ªåå½¢" width="300" height="100" />
<br />
<img src="example.svg#three" alt="èè²åå½¢" width="100" height="100" />
ç»æ
è§è
| è§è |
|---|
| Scalable Vector Graphics (SVG) 2 # ViewElement |