pattern
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.
* Some parts of this feature may have varying levels of support.
使ç¨é¢å®ä¹çå¾å½¢å¯¹ä¸ä¸ªå¯¹è±¡è¿è¡å¡«å
ææè¾¹ï¼å°±è¦ç¨å°patternå
ç´ ãpatternå
ç´ è®©é¢å®ä¹å¾å½¢è½å¤ä»¥åºå®é´éå¨ x è½´å y è½´ä¸éå¤ï¼æå¹³éºï¼ä»èè¦çè¦æ¶è²çåºåãå
使ç¨pattern å
ç´ å®ä¹å¾æ¡ï¼ç¶åå¨ç»å®çå¾å½¢å
ç´ ä¸ç¨å±æ§ fill æå±æ§ stroke å¼ç¨ç¨æ¥å¡«å
ææè¾¹çå¾æ¡ã
使ç¨ä¸ä¸æ
| ç±»å« | 容å¨å ç´ |
|---|---|
| å 许çå 容 | ä»»ææ°éãä»»æ顺åºçä¸åå
ç´ ï¼ å¨ç»å ç´ æè¿°æ§å ç´ æ¸åå ç´ å½¢ç¶å ç´ ç»æåå ç´ <a>ã<clipPath>ã<filter>ã<foreignObject>ã<image>ã<marker>ã<mask>ã<script>ã<style>ã<switch>ã<text>ã<view> |
示ä¾
html
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)" />
<circle
cx="180"
cy="50"
r="40"
fill="none"
stroke-width="20"
stroke="url(#star)" />
</svg>
å±æ§
å ¨å±å±æ§
ä¸æå±æ§
DOM æ¥å£
该å
ç´ å®ç°äº SVGPatternElement æ¥å£ã