recursal/MDN huggingface dataset:
bbox
====

**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 **`bbox`** attribute defines the maximal bounding box of a font.

You can use this attribute with the following SVG elements:

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

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

`<string>`

A comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font.

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

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

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

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

The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text.

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

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Default value | `normal` |
| Animatable | Yes |

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-stretch-prop |

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

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

See also
--------

* `CSS font-stretch`
orient
======

The **`orient`** attribute indicates how a marker is rotated when it is placed at its position on the shape.

You can use this attribute with the following SVG elements:

* `<marker>`
Example
-------
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker
 id="dataArrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>

  <polyline
 points="10,10 10,90 90,90"
 fill="none"
 stroke="black"
 marker-start="url(#arrow)"
 marker-end="url(#arrow)" />

  <polyline
 points="15,80 29,50 43,60 57,30 71,40 85,15"
 fill="none"
 stroke="grey"
 marker-start="url(#dataArrow)"
 marker-mid="url(#dataArrow)"
 marker-end="url(#dataArrow)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto` | `auto-start-reverse` |
 `<angle>` | `<number>` |
| Default value | `0` |
| Animatable | Yes (non-additive) |

`auto`

This value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.

`auto-start-reverse`

If placed by `marker-start`, the marker is oriented 180° different from the orientation that would be used if `auto` were specified. For all other markers, `auto-start-reverse` means the same as `auto`.

**Note:** This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends.

`<angle>`

This value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

**Note:** For example, if a value of `45` is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.

`<number>`

This value indicates an angle in degrees. The marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.

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

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

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

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

The **`numOctaves`** attribute defines the number of octaves for the noise function of the `<feTurbulence>` primitive.

 An octave is a noise function defined by its frequency and amplitude. A turbulence is built by accumulating several octaves with increasing frequencies and decreasing amplitudes.
 The higher the number of octaves, the more natural the noise looks. Though more octaves also require more calculations, resulting in a negative impact on performance.

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" numOctaves="1" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" numOctaves="3" />
  </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" numOctaves="3" 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 | `<integer>` |
| Default value | `1` |
| Animatable | Yes |

`<integer>`

Defines the number of octaves. Negative values are forbidden.

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

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

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

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

See also
--------

* Understanding Perlin Noise
* `baseFrequency`
target
======

The **`target`** attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which a document is to be opened when the link is activated:

You can use this attribute with the following SVG elements:

* `<a>`
Example
-------
```

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

text {
  font:
    20px Arial,
    Helvetica,
    sans-serif;
  fill: blue;
  text-decoration: underline;
}
```



```html
<svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org" target="\_self">
    <text x="0" y="20">Open link within iframe</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_blank">
    <text x="0" y="60">Open link in new tab or window</text>
  </a>
  <a href="https://developer.mozilla.org" target="\_top">
    <text x="0" y="100">Open link in this tab or window</text>
  </a>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `_self` | `_parent` | `_top` |
 `_blank` | `<XML-Name>` |
| Default value | `_self` |
| Animatable | Yes |

`_replace` 
Deprecated

The current SVG image is replaced by the linked content in the same rectangular area in the same frame as the current SVG image.

**Note:** This value was never well implemented, and the distinction between `_replace` and `_self` has been made redundant by changes in the HTML definition of browsing contexts. Use `_self` to replace the current SVG document.

`_self`

The current SVG image is replaced by the linked content in the same browsing context as the current SVG image.

`_parent`

The immediate parent browsing context of the SVG image is replaced by the linked content, if it exists and can be securely accessed from this document.

`_top`

The content of the full active window or tab is replaced by the linked content, if it exists and can be securely accessed from this document

`_blank`

A new un-named window or tab is requested for the display of the linked content, if this document can securely do so. If the user agent does not support multiple windows/tabs, the result is the same as \_top.

`<XML-Name>`

Specifies the name of the browsing context (tab, inline frame, object, etc.) for display of the linked content. If a context with this name already exists, and can be securely accessed from this document, it is re-used, replacing the existing content. If it does not exist, it is created (the same as '\_blank', except that it now has a name). The name must be a valid XML Name [XML11], and should not start with an underscore (U+005F LOW LINE character), to meet the requirements of a valid browsing context name from HTML.

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

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

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

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

The SVG styling attributes are all the attributes that can be specified on any SVG element to apply CSS styling effects.

* `class`
* `style`
Attributes
----------

`class`

 Assigns a class name or set of class names to an element. It functions identically to the `class` attribute in HTML.
 *Value*: Any valid ID string; *Animatable*: **Yes**

`style`

 It specifies style information for its element. It functions identically to the `style` attribute in HTML.
 *Value*: Any valid style string; *Animatable*: **No**

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

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

The **`stroke`** attribute is a presentation attribute defining the color (*or any SVG paint servers like gradients or patterns*) used to paint the outline of the shape;

**Note:** As a presentation attribute `stroke` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color stroke -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `none` |
| Animatable | Yes |

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

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

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

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

The **`overflow`** attribute sets what to do when an element's content is too big to fit in its block formatting context. **This feature is not widely implemented yet**.

This attribute has the same parameter values and meaning as the `CSS overflow property`, however, the following additional points apply:

* If it has a value of `visible`, the attribute has no effect (i.e., a clipping rectangle is not created).
* If the `overflow` property has the value `hidden` or `scroll`, a clip of the exact size of the SVG viewport is applied.
* When `scroll` is specified on an `<svg>` element, a scrollbar or panner is normally shown for the SVG viewport whether or not any of its content is clipped.
* Within SVG content, the value `auto` implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.

**Note:** Although the initial value for overflow is `auto`, it is overwritten in the User Agent style sheet for the `<svg>` element when it is not the root element of a stand-alone document, the `<pattern>` element, and the `<marker>` element to be hidden by default.

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">
    This text is wider than the SVG, so there should be a scrollbar shown.
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `visible` | `hidden` | `scroll` |
 `auto` |
| Default value | `visible` |
| Animatable | Yes |

For a description of the values, please see the `CSS overflow` property.

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

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

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

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

See also
--------

* `CSS overflow`
amplitude
=========

The **`amplitude`** attribute controls the amplitude of the gamma function of a component transfer element when its `type` attribute is `gamma`.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Usage notes
-----------

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

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

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

See also
--------

* `<feComponentTransfer>`
string
======

**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 **`string`** attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent `<font-face-uri>` element supports.

You can use this attribute with the following SVG elements:

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

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

`<anything>`

This value specifies a list of formats that are supported by the font referenced by the parent `<font-face-uri>` element.

The available types are: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, and `"svg"`. See the `src` descriptor of the `@font-face` at-rule for more information.

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

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

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

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

The **`specularConstant`** attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value the stronger the reflection.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="specularLighting1" x="0" y="0" width="100%" height="100%">
    <feSpecularLighting in="SourceGraphic" specularConstant="1.2">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </filter>
  <filter id="specularLighting2" x="0" y="0" width="100%" height="100%">
    <feSpecularLighting in="SourceGraphic" specularConstant="0.8">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </filter>

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

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

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

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

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

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

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

See also
--------

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

The **`patternContentUnits`** attribute indicates which coordinate system to use for the contents of the `<pattern>` element.

**Note:** That this attribute has no effect if attribute `viewBox` is specified on the `<pattern>` element.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!--
 A pattern tile that content coordinates and values are
 computed against the current coordinate user space.
 Note that the size of the tile is computed against
 the bounding box of the target element
 -->
  <pattern
 id="p1"
 width="20%"
 height="20%"
 patternContentUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!--
 A pattern tile that content coordinates and values are
 computed against the bounding box of the target element.
 Note that the size of the tile is also computed against
 the bounding box of the target element
 -->
  <pattern
 id="p2"
 width="20%"
 height="20%"
 patternContentUnits="objectBoundingBox">
    <circle cx=".1" cy=".1" r=".1" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
```

pattern
-------

For `<pattern>`, `patternContentUnits` defines the coordinate system in use for the content of the element.

|  |  |
| --- | --- |
| Value | `userSpaceOnUse` | `objectBoundingBox` |
| Default value | `userSpaceOnUse` |
| Animatable | Yes |

`userSpaceOnUse`

This value indicates that all coordinates inside the `<pattern>` element refer to the user coordinate system as defined when the pattern tile was created.

`objectBoundingBox`

This value indicates that all coordinates inside the `<pattern>` element are relative to the bounding box of the element the pattern is applied to. A bounding box could be considered the same as if the content of the `<pattern>` were bound to a "`0 0 1 1`" `viewBox` for a pattern tile of width and height of 100%.

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

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

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

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

The **`origin`** attribute specifies the origin of motion for an animation. It has no effect in SVG.

You can use this attribute with the following SVG elements:

* `<animateMotion>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `default` |
| Default value | `default` |
| Animatable | No |

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

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

See also
--------

* Definition of `origin` in SMIL Animation specification
vert-origin-x
=============

**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 **`vert-origin-x`** attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing vertically oriented text.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *Half of `horiz-adv-x` value* |
| Animatable | No |

`<number>`

This value indicates the x-coordinate of the origin of a glyph for vertically oriented text.

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

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

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

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

See also
--------

* `horiz-origin-x`
* `horiz-origin-y`
* `vert-origin-y`
pointsAtY
=========

The **`pointsAtY`** attribute represents the y location in the coordinate system established by attribute `primitiveUnits` on the `<filter>` element of the point at which the light source is pointing.

You can use this attribute with the following SVG elements:

* `<feSpotLight>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="lighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="60" y="60" z="50" pointsAtY="0" />
    </feDiffuseLighting>
  </filter>
  <filter id="lighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="60" y="60" z="50" pointsAtY="400" />
    </feDiffuseLighting>
  </filter>

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

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-pointsaty |

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

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