recursal/MDN huggingface dataset:
clip
====

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`clip`** attribute is a presentation attribute defining the visible region of an element.

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

You can use this attribute with the following SVG elements:

* `<svg>`
* `<symbol>`
* `<image>`
* `<foreignObject>`
* `<pattern>`
* `<marker>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

Usage notes
-----------

**Warning:** This property is deprecated. Use `clip-path` instead.


|  |  |
| --- | --- |
| Value | `auto` | `rect()` |
| Default value | `auto` |
| Animatable | Yes |

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.

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
seed
====

The **`seed`** attribute represents the starting number for the pseudo random number generator of the `<feTurbulence>` filter primitive.

You can use this attribute with the following SVG elements:

* `<feTurbulence>`
Example
-------

### Example 1
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" seed="0" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" seed="100" />
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter:url(#noise2); transform: translateX(220px);" />
</svg>
```

### Example 2


```html
<svg
 width="200"
 height="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence baseFrequency="0.05" seed="1000" result="turbulence" />
    <feDisplacementMap
 in2="turbulence"
 in="SourceGraphic"
 scale="50"
 xChannelSelector="R"
 yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `0` |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-seed |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
overline-thickness
==================

The `overline-thickness` attribute represents the ideal thickness of the overline. The overline thickness is expressed in the font's coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage context
-------------

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <number> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |
x1
==

The **`x1`** attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the `x` attribute instead.

You can use this attribute with the following SVG elements:

* `<line>`
* `<linearGradient>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

line
----

For `<line>`, `x1` defines the x coordinate of the starting point of the line.

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>**
 |
 **<number>** |
| Default value | `0` |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

linearGradient
--------------

For `<linearGradient>`, `x1` defines the x coordinate of the starting point of the *gradient vector* used to map the gradient stop values. The exact behavior of this attribute is influenced by the `gradientUnits` attributes

|  |  |
| --- | --- |
| Value | **<length>**
 |
 **<percentage>**
 |
 **<number>** |
| Default value | `0%` |
| Animatable | Yes |
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 By default the gradient vector start at the left
 bounding limit of the shape it is applied to
 -->
  <linearGradient x1="0%" id="g0">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="1" y="1" width="8" height="8" fill="url(#g0)" />

  <!--
 Here the gradient vector start at 80% of the left
 bounding limit of the shape it is applied to
 -->
  <linearGradient x1="80%" id="g1">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementX1Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementX1Attribute |
color
=====

The **`color`** attribute is used to provide a potential indirect value, `currentcolor`, for the `fill`, `stroke`, `stop-color`, `flood-color`, and `lighting-color` attributes.

**Note:** As a presentation attribute, `color` can be used as a CSS property. See CSS color for further information.

As a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on SVG elements.

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<color>`
 | `inherit` |
| Default value | Depends on user agent |
| Animatable | Yes |

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentcolor" />
    <circle
 r="25"
 cx="70"
 cy="70"
 stroke="currentcolor"
 fill="none"
 stroke-width="5" />
  </g>
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
patternTransform
================

The **`patternTransform`** attribute defines a list of transform definitions that are applied to a pattern tile.

You can use this attribute with the following SVG elements:

* `<pattern>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
 id="p1"
 width=".25"
 height=".25"
 patternTransform="rotate(20)
 skewX(30)
 scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>
```

pattern
-------

For `<pattern>`, `patternTransform` defines a list of transform definitions that are applied to a pattern tile.

**Note:** As of SVG2, it is also allowed to use the CSS `transform` property. However, the current state of implementation isn't very good. For backward compatibility reason, it is highly suggested to keep using the `patternTransform` attribute.


|  |  |
| --- | --- |
| Value | <transform-list> |
| Default value | *Identity transform* |
| Animatable | Yes |

### Transform functions

To know more about the definition of transform functions, see the `transform` attribute definition.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PatternElementPatternTransformAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-family
===========

The **`font-family`** attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.

**Note:** As a presentation attribute, `font-family` can be used as a CSS property. See the `CSS font-family` property for more information.

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Arial, Helvetica, sans-serif">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Default value | Depends on user agent |
| Animatable | Yes |

For a description of the values, please refer to the CSS `font-family` property.

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CSS font-family`
pointer-events
==============

The **`pointer-events`** attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.

**Note:** As a presentation attribute `pointer-events` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<a>`
* `<circle>`
* `<clipPath>`
* `<defs>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<image>`
* `<line>`
* `<marker>`
* `<mask>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<tspan>`
* `<use>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 The circle will always intercept the mouse event.
 To change the color of the rect underneath you have
 to click outside the circle
 -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
 The circle below will never catch a mouse event.
 The rect underneath will change color whether you
 are clicking on the circle or the rect itself
 -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
```



```js
window.addEventListener("mouseup", (e) => {
  // Let's pick a random color between #000000 and #FFFFFF
  const color = Math.round(Math.random() \* 0xffffff);

  // Let's format the color to fit CSS requirements
  const fill = `#${color.toString(16).padStart(6, "0")}`;

  // Let's apply our color in the
  // element we actually clicked on
  e.target.style.fill = fill;
});
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `bounding-box` | `visiblePainted` |
 `visibleFill` | `visibleStroke` |
 `visible` | `painted` | `fill` |
 `stroke` | `all` | `none` |
| Default value | `visiblePainted` |
| Animatable | Yes |

*For a detailed explanation of each possible value, have a look at the CSS `pointer-events` documentation.*

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProp |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
edgeMode
========

The **`edgeMode`** attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
* `<feGaussianBlur>`
feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `edgeMode` determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

|  |  |
| --- | --- |
| Value | `duplicate` | `wrap` | `none` |
| Default value | `duplicate` |
| Animatable | Yes |

`duplicate`

This value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.

`wrap`

This value indicates that the input image is extended by taking the color values from the opposite edge of the image.

`none`

This value indicates that the input image is extended with pixel values of zero for R, G, B and A.

feGaussianBlur
--------------

For `<feGaussianBlur>`, `edgeMode` determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

|  |  |
| --- | --- |
| Value | `duplicate` | `wrap` | `none` |
| Default value | `none` |
| Animatable | Yes |

`duplicate`

This value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.

`wrap`

This value indicates that the input image is extended by taking the color values from the opposite edge of the image.

`none`

This value indicates that the input image is extended with pixel values of zero for R, G, B and A.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-edgemode |
min
===

The **`min`** attribute specifies the minimum value of the active animation duration.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 min="2s"
 repeatCount="indefinite"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 min="2s"
 repeatCount="indefinite"
 values="10 ; 60 ; 110 ; 60 ; 10"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
  </circle>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<clock-value>` |
| Default value | `0` |
| Animatable | No |

`<clock-value>`

Specifies the length of the minimum value of the active duration, measured in local time. The value must be greater than 0.

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # MinAttribute |
method
======

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`method`** attribute indicates the method by which text should be rendered along the path of a `<textPath>` element.

You can use this attribute with the following SVG elements:

* `<textPath>`
textPath
--------

For `<textPath>`, `method` indicates the method by which text should be rendered along the path.

|  |  |
| --- | --- |
| Value | `align` | `stretch` |
| Default value | `align` |
| Animatable | Yes |

align

This value indicates that the characters should be rendered so that they are not stretched or warped. The characters are rotated, scaled and stretched when they are rendered. As a result, for fonts with connected characters (e.g. cursive fonts), the connections may not align properly when text is rendered along the path.

stretch

This value indicates that the character outlines will be converted into paths, and then stretched and possibly warped. With this approach, connected characters, such as in cursive fonts, will maintain their connections.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextPathElementMethodAttribute |
surfaceScale
============

The **`surfaceScale`** attribute represents the height of the surface for a light filter primitive.

You can use this attribute with the following SVG elements:

* `<feDiffuseLighting>`
* `<feSpecularLighting>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" surfaceScale="1">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" surfaceScale="15">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#diffuseLighting2); transform: translateX(220px);" />
</svg>
```

feSpecularLighting
------------------

For `<feSpecularLighting>`, `surfaceScale` defines the height of the surface.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `surfaceScale` defines the height of the surface.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fediffuselighting-surfacescale |
| Filter Effects Module Level 1 # element-attrdef-fespecularlighting-surfacescale |

See also
--------

* Description of Phong reflection model on Wikipedia
max
===

The **`max`** attribute specifies the maximum value of the active animation duration.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 max="6s"
 repeatCount="indefinite"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 max="6s"
 repeatCount="indefinite"
 values="10 ; 60 ; 110 ; 60 ; 10"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
  </circle>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<clock-value>` |
| Default value | *None* |
| Animatable | No |

`<clock-value>`

Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # MaxAttribute |

See also
--------

* `min`
v-hanging
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`v-hanging`** attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment. The value is an offset in the font coordinate system relative to the glyph-specific `vert-origin-x` attribute.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *None* |
| Animatable | No |

`<number>`

This value indicates the alignment coordinate for the glyphs to achieve hanging baseline alignment.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementVertHangingAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `hanging`
exponent
========

The **`exponent`** attribute defines the exponent of the gamma function.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
 id="gradient"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="200"
 y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset="0.5" stop-color="#00ff00" />
      <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="gamma" exponent="1" />
      <feFuncG type="gamma" exponent="1" />
      <feFuncB type="gamma" exponent="1" />
    </feComponentTransfer>
  </filter>
  <filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="gamma" exponent="5" />
      <feFuncG type="gamma" exponent="5" />
      <feFuncB type="gamma" exponent="5" />
    </feComponentTransfer>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 fill="url(#gradient)"
 style="filter: url(#componentTransfer1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 fill="url(#gradient)"
 style="filter: url(#componentTransfer2); transform: translateX(220px);" />
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1` |
| Animatable | Yes |

`<number>`

If the `type` attribute of the component element is set to `gamma`, this value specifies the exponent of the gamma function

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-exponent |