This translation is incomplete. Please help translate this article from English.

clip-path CSS กำลังสร้างภาพวาดที่กำหนดสิ่งที่เป็นส่วนหนึ่งของคุณจะแสดงส่วนที่อยู่ภายในเขตพื้นที่จะชี้ไปที่ SVG แบบ ตัวอย่างเช่น a circle().

หมายเหตุทางประวัติศาสตร์: {cs

   
   
   

sxref ("clip")} ที่เลิกใช้แล้ว

/ * ค่าคำหลัก * / 
เส้นทางรถ: ไม่มี; 

/ * ค่ารูปภาพ * / 
เฟ้อเส้นทาง: url (resources.svg # c1); 

/ * ค่าของกล่อง * / 
คลิป - เส้นทาง: กรอกข้อมูลช่อง; 
คลิป - เส้นทาง: กล่องเส้น; 
คลิป - เส้นทาง: กล่อง - ดู; 
คลิป - เส้นทาง: margin-box; 
คลิป - เส้นทาง: border-box; 
คลิป -path: padding-box; 
clip-path: content-box; 

/ * ค่าเรขาคณิต * /
เส้นทางคลิป: แทรก (100px 50 พิกเซล);
เส้นทางคลิป: แวดวง (50px ที่ 0 100px);
เส้นทางคลิป: รูปหลายเหลี่ยม (50% 0%, 100% 50%, 50% 100%, 0% 50%);

/ * กล่องและค่าเรขาคณิตรวม * /
คลิป -path: padding-box circle (50px ที่ 0 100px);

/ * ค่าโกลบอล * /
เส้นทางคลิป: สืบทอด;
คลิป - เส้นทาง: เริ่มต้น;
คลิป - เส้นทาง: ยกเลิกการตั้งค่า;

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesrefer to reference box when specified, otherwise border-box
Mediavisual
Computed valueas specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The clip-path property is specified as one or a combination of the values listed below.

Values

url()
Represents a URL referencing a clipping path element.
inset(), circle(), ellipse(), polygon()
A <basic-shape> function. The size and position of the shape is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box.
<geometry-box>
If specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. The geometry box can be one of the following values:
fill-box
Uses the object bounding box as the reference box.
stroke-box
Uses the stroke bounding box as the reference box.
view-box
Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.
margin-box
Uses the margin box as the reference box.
border-box
Uses the border box as the reference box.
padding-box
Uses the padding box as the reference box.
content-box
Uses the content box as the reference box.
none
No clipping path is created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Examples

/* Inline SVG  */
.target {
  clip-path: url(#c1);
}

/* External SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* Circle shape */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sample

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

ผล

ข้อมูลจำเพาะ

สเปค สถานะ คิดเห็น
Unknown
The definition of 'คลิปพา ธ ' in that specification.
Unknown ขยายแอ็พพลิเคชันไปยังองค์ประกอบ HTML
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'clip-path' in that specification.
Recommendation คำจำกัดความเริ่มต้น (ใช้เฉพาะกับองค์ประกอบ SVG เท่านั้น)

ความเข้ากันได้ของเบราเซอร์

 

No compatibility data found. Please contribute data for "css.properties.clip path" (depth: 1) to the MDN compatibility data repository.

 

ดูสิ่งนี้ด้วย

Document Tags and Contributors

ผู้มีส่วนร่วมกับหน้านี้: may583
อัปเดตล่าสุดโดย: may583,