mozilla

Revision 57329 of clip-rule

  • Revision slug: SVG/Attribute/clip-rule
  • Revision title: clip-rule
  • Revision id: 57329
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 217 words added

Revision Content

« SVG Attribute reference home

The clip-rule attribute only applies to graphics elements that are contained within a {{ SVGElement("clipPath") }} element. The clip-rule attribute basically works as the {{ SVGAttr("fill-rule") }} attribute, except that it applies to {{ SVGElement("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 {{ SVGElement("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 nonezero | evenodd | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
nonzero
See description of {{ SVGAttr("fill-rule") }} property.
evenodd
See description of {{ SVGAttr("fill-rule") }} property.

Example

Elements

The following elements can use the clip-rule attribute, but only if they are inside a {{ SVGElement("clipPath") }} element.

See also

  • {{ SVGElement("clipPath") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>clip-rule</code> attribute only applies to graphics elements that are contained within a {{ SVGElement("clipPath") }} element. The <code>clip-rule</code> attribute basically works as the {{ SVGAttr("fill-rule") }} attribute, except that it applies to {{ SVGElement("clipPath") }} definitions.</p>
<p>The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because <code>clip-rule</code> is specified on the {{ SVGElement("path") }} element that defines the clipping shape:</p>
<pre>&lt;g&gt;
    &lt;clipPath id="MyClip"&gt;
        &lt;path d="..." clip-rule="evenodd" /&gt;
    &lt;/clipPath&gt;
    &lt;rect clip-path="url(#MyClip)" ... /&gt;
&lt;/g&gt;
</pre>
<p>whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the <code>clip-rule</code> is specified on the referencing element, not on the object defining the clipping shape:</p>
<pre>&lt;g&gt;
    &lt;clipPath id="MyClip"&gt;
        &lt;path d="..." /&gt;
    &lt;/clipPath&gt;
    &lt;rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /&gt;
&lt;/g&gt;
</pre>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong title="this is the default value">nonezero</strong> | evenodd | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty" title="http://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt><span class="prop-value">nonzero</span></dt> <dd>See description of {{ SVGAttr("fill-rule") }} property.</dd> <dt><span class="prop-value">evenodd</span></dt> <dd>See description of {{ SVGAttr("fill-rule") }} property.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>clip-rule</code> attribute, but only if they are inside a {{ SVGElement("clipPath") }} element.</p>
<ul> <li><a href="/en/SVG/Element#Graphical" title="en/SVG/Element#Graphical">Graphical elements</a> »</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ SVGElement("clipPath") }}</li>
</ul>
Revert to this revision