clip-rule
«
SVG Attribute reference home
clip-rule
attribute only applies to graphics elements that are contained within a
<clipPath>
element. The
clip-rule
attribute basically works as the
fill-rule
attribute, except that it applies to
<clipPath>
definitions.
The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because
clip-rule
is specified on the
<path>
element that defines the clipping shape:
<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the
clip-rule
is specified on the referencing element, not on the object defining the clipping shape:
<g>
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
|
值
|
nonzero | evenodd | inherit
|
|
默认值
|
nonzero
|
|
Animatable
|
Yes
|
-
nonzero
See description of
fill-rule
特性。
-
evenodd
See description of
fill-rule
特性。
<svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- Define star path -->
<defs>
<path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
</defs>
<!-- Left: evenodd -->
<clipPath id="emptyStar">
<use xlink:href="#star" clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
<!-- Right: nonzero -->
<clipPath id="filledStar">
<use xlink:href="#star" clip-rule="nonzero" />
</clipPath>
<rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>
The following elements can use the
clip-rule
attribute, but only if they are inside a
<clipPath>
元素。
BCD tables only load in the browser
Found a problem with this page?
最后修改：
,
由 MDN 贡献者
