maskUnits

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

maskUnits attribute indicates which coordinate system to use for the geometry properties of the <mask> 元素。

You can use this attribute with the following SVG elements:

<mask>

范例

html,body,svg { height:100% }

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask1" maskUnits="userSpaceOnUse"
        x="20%" y="20%" width="60%" height="60%">
    <rect   fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>
  <mask id="myMask2" maskUnits="objectBoundingBox"
        x="20%" y="20%" width="60%" height="60%">
    <rect   fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>
  <!-- Some reference rect to materialized the mask -->
  <rect id="r1" x="0"  y="0"  width="45" height="45" />
  <rect id="r2" x="0"  y="55" width="45" height="45" />
  <rect id="r3" x="55" y="55" width="45" height="45" />
  <rect id="r4" x="55" y="0"  width="45" height="45" />
  <!-- The first 3 rect are masked with useSpaceOnUse units -->
  <use mask="url(#myMask1)" xlink:href="#r1" fill="red" />
  <use mask="url(#myMask1)" xlink:href="#r2" fill="red" />
  <use mask="url(#myMask1)" xlink:href="#r3" fill="red" />
  <!-- The last rect is masked with objectBoundingBox units -->
  <use mask="url(#myMask2)" xlink:href="#r4" fill="red" />
</svg>

mask

For <mask> , maskUnits defines the coordinate system in use for the geometry attributes ( x , y , width and height ) of the element.

值	`userSpaceOnUse` \| `objectBoundingBox`
默认值	`objectBoundingBox`
Animatable	Yes

userSpaceOnUse
objectBoundingBox

规范

规范	状态	注释
CSS Masking Module Level 1 The definition of 'maskUnits' in that specification.	候选推荐
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'maskUnits' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者