clipPathUnits

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>

clipPathUnits attribute indicates which coordinate system to use for the contents of the <clipPath> 元素。

You can use this attribute with the following SVG elements:

<clipPath>

范例

html,body,svg { height:100% }

<svg viewBox="0 0 100 100">
  <clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>
  <clipPath id="myClip2" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".35" />
  </clipPath>
  <!-- Some reference rect to materialized to clip path -->
  <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 clipped with useSpaceOnUse units -->
  <use clip-path="url(#myClip1)" xlink:href="#r1" fill="red" />
  <use clip-path="url(#myClip1)" xlink:href="#r2" fill="red" />
  <use clip-path="url(#myClip1)" xlink:href="#r3" fill="red" />
  <!-- The last rect is clipped with objectBoundingBox units -->
  <use clip-path="url(#myClip2)" xlink:href="#r4" fill="red" />
</svg>

clipPath

For <clipPath> , clipPathUnits define the coordinate system in use for the content of the element.

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

userSpaceOnUse
objectBoundingBox

规范

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

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 贡献者