clip

Deprecated

Avoid using this feature in new projects. SVG 2 omittted some parts of SVG 1.1 to "improv[e] the usability and precision of the language." This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: SVGæ@font-face.

clip å±æ§æ¯å®ä¹åç´ å¯è§åºåçå±æ§ã

As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignObject>, <pattern>, <marker>

ç¤ºä¾

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

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>

ä½¿ç¨è¯´æ

Warning: This property is deprecated. Use clip-path instead.

å¯ç¨å¼	auto \| <shape> \| inherit
é»è®¤å¼	Yes
Animatable	Yes

The value auto defines a clipping path along the bounds of the viewport created by the given element.

The value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of the element viewport.