clip-rule - SVG: Scalable Vector Graphics 编辑
« SVG Attribute reference home
The 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
Usage context
Categories | Presentation attribute |
---|---|
Value | nonzero | evenodd | inherit |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
Example
<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>
Elements
The following elements can use the clip-rule
attribute, but only if they are inside a <clipPath>
element.
Browser compatibility
BCD tables only load in the browser
See also
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论