From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/svg/attribute/clip/index.html | 92 +++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/clip/index.html (limited to 'files/zh-cn/web/svg/attribute/clip') diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.html new file mode 100644 index 0000000000..8409d35fca --- /dev/null +++ b/files/zh-cn/web/svg/attribute/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/SVG/Attribute/clip +tags: + - SVG + - SVG 属性 +translation_of: Web/SVG/Attribute/clip +--- +
{{SVGRef}}{{deprecated_header}}
+ +

clip 属性是定义元素可见区域的属性。

+ +

clip 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <shape> 的坐标值上。auto 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。

+ +

As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}

+ +
+ + +
<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>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

用法

+ +

Warning: This property is deprecated. Use {{cssxref("clip-path")}} instead.

+ + + + + + + + + + + + + + + + +
可用值auto | <shape> | inherit
默认值Yes
AnimatableYes
+ +

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.

+ +

浏览器兼容性

+ + + +

{{Compat("svg.attributes.presentation.clip")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Deprecates clip property, suggests {{cssxref("clip-path")}} as replacement.
{{SpecName("SVG1.1", "masking.html#ClipProperty", "clip")}}{{Spec2("SVG1.1")}}Initial definition
-- cgit v1.2.3-54-g00ecf