mask

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æâ©.

ä½¿ç¨åºæ¯

ç±»å«	å®¹å¨åç´
åè®¸çåå®¹	ä»»ææ°éãä»»æé¡ºåºçä¸ååç´ ï¼ å¨ç»åç´ æè¿°æ§åç´ å½¢ç¶åç´ ç»æååç´ æ¸ååç´ `<a>`ã`<clipPath>`ã`<filter>`ã`<foreignObject>`ã`<image>`ã`<marker>`ã`<mask>`ã`<pattern>`ã`<script>`ã`<style>`ã`<switch>`ã`<text>`ã`<view>`

ç¤ºä¾

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- ç½è²åç´ ä¸çææåå®¹é½å°å¯è§ -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- é»è²åç´ ä¸çææåå®¹é½å°ä¸å¯è§ -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- åºç¨æ¤èçåï¼æä»¬å¨ååä¸âæâä¸ä¸ªå¿å½¢å -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>