clip

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

Revision Content

« SVG Attribute reference home

The clip attribute has the same parameter values as defined for the {{ cssxref("clip","CSS clip property") }}. Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the <shape>. The value of auto defines a clipping path along the bounds of the viewport created by the given element.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("clip","CSS clip") }} for further information.

Usage context

Categories Presentation attribute
Value auto | <shape> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the font-size attribute

  • {{ SVGElement("svg") }}
  • {{ SVGElement("symbol") }}
  • {{ SVGElement("image") }}
  • {{ SVGElement("foreignObject") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("marker") }}

See also

  • {{ cssxref("clip","CSS clip") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>clip</code> attribute has the same parameter values as defined for the {{ cssxref("clip","CSS clip property") }}. Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the &lt;shape&gt;. The value of <code>auto</code> defines a clipping path along the bounds of the viewport created by the given element.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("clip","CSS clip") }} for further information.</p>
<h2>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>auto</strong> | &lt;shape&gt; | 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#ClipProperty" title="http://www.w3.org/TR/SVG11/masking.html#ClipProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>font-size</code> attribute</p>
<ul> <li>{{ SVGElement("svg") }}</li> <li>{{ SVGElement("symbol") }}</li> <li>{{ SVGElement("image") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("pattern") }}</li> <li>{{ SVGElement("marker") }}</li>
</ul>
<h2>See also</h2>
<ul> <li>{{ cssxref("clip","CSS clip") }}</li>
</ul>
Revert to this revision