recursal/MDN huggingface dataset:
document
========

The `document` finds a node-set in an external document, or multiple external documents, and returns the resulting node-set.

### Syntax
```

document( URI [,node-set] )
```

### Arguments

`URI`

An absolute or relative URI of the document to be retrieved. The URI may also include a fragment identifier.

`node-set` (optional)

An expression pointing to a node-set in the external document that should be returned.

### Returns

A node-set.

### Notes

* If the URI contains a fragment identifier and that fragment can be identified in the external document, that fragment will be treated as the root in the `node-set` argument's expression. If the `node-set` argument is omitted, the entire fragment will be returned.
* If the `URI` argument is a node-set, and the second argument is present, each node in the node-set will be evaluated as a separate URI, and the returned node-set will be as if the `document` function has been called multiple times (each time with the same second argument just as given in the function call) and the resulting node-sets had been concatenated into a single node-set.
* Other specific conditions exist with specified behaviors. See the XSLT 1.0 documentation for details.
* Since the URI is relative to the XSL document, `document("")` would return the root node of the current document.

This function is an XSLT-specific addition to XPath. It is not a part of the core XPath function library.

### Defined

XSLT 1.0 12.1

### Gecko support

Supported.
translate
=========

The `translate` function evaluates a string and a set of characters to translate and returns the translated string.

### Syntax
```

translate(string, abc, XYZ)
```

### Arguments

`string`

The string to evaluate.

`abc`

The string of characters that will be replaced.

`XYZ`

The string of characters used for replacement. The first character in `XYZ` will replace every occurrence of the first character in `abc` that appears in `string`.

### Returns

The translated string.

### Notes

XPath notes that the translate function is not a sufficient solution for case conversion in all languages. A future version of XPath may provide additional functions for case conversion.

However, this is the closest we have at present to a function that can convert a string to uppercase or lowercase.

Example


```xml
<xsl:value-of select="translate('The quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')" />
```


Output
```

THE QUICK BROWN FOX.
```


* If `abc` is longer than `XYZ`, then every occurrence of characters in `abc` that do not have a corresponding character in `XYZ` will be removed.

Example


```xml
<xsl:value-of select="translate('The quick brown fox.', 'brown', 'red')" />
```


Output
```

The quick red fdx.
```


* If `XYZ` contains more characters than `abc`, the extra characters are ignored.
### Defined

XPath 1.0 4.2

### Gecko support

Supported.
floor
=====

The `floor` function evaluates a decimal number and returns the largest integer less than or equal to the decimal number.

### Syntax
```

floor( number )
```

### Arguments

`number`

The decimal number to be evaluated.

### Returns

The nearest integer less than or equal to `number`.

### Defined

XPath 1.0 4.4

### Gecko support

Supported.
concat
======

The `concat` function concatenates two or more strings and returns the resulting string.

### Syntax
```

concat( string1, string2 [,stringn]* )
```

### Arguments

`stringn`

This function accepts two or more arguments. Each of these arguments is a string.

### Returns

A single string that is the concatenation of all the strings passed to the function as arguments.

### Defined

XPath 1.0 4.2

### Gecko support

Supported.
id
==

The `id` function finds nodes matching the given ids and returns a node-set containing the identified nodes.

### Syntax
```

id( expression )
```

### Arguments

`expression`

 If `expression` is a node-set, then the string value of each node in the node-set is treated as an individual id. The returned node set is the nodes corresponding to those ids.
 If `expression` is a string, or anything other than a node-set, then `expression` is treated as a space-separated list of ids. The returned node set is the nodes corresponding to those ids.


### Returns

A node-set containing the node or nodes identified by the given id or ids.

### Notes

* The DTD of the XML document determines what attribute is an ID. See XPath 1.0 5.2.1
### Defined

XPath 1.0 4.1

### Gecko support

Partially supported.
format-number
=============

The `format-number` function evaluates a number and returns a string representing the number in a given format.

### Syntax
```

format-number(number, pattern)
format-number(number, pattern, decimalFormat)
```

### Parameters

`number`

The number to be formatted

`pattern`

A string in the format of the Java DecimalFormat class.

`decimalFormat` (optional)

The name of an `xsl:decimal-format` element that defines the number format to be used. If omitted, the default decimal-format will be used.

### Return value

A string representing the number in the new format.

### Notes

This function is an XSLT-specific addition to XPath. It is not a part of the core XPath function library.

### Defined

XSLT 1.0 12.3

### Gecko support

Supported.
choose
======

The `choose` function returns one of the specified objects based on a boolean parameter.

**Note:** This method should be used instead of `if ()`, which has been deprecated.

### Syntax
```

choose( boolean, object1, object2 )
```

### Arguments

`boolean`

The boolean operation to use when determining which object to return.

`object1`

The first object to consider returning.

`object2`

The second object to consider returning.

### Returns

If the boolean parameter is true, the first object is returned; otherwise, the second object is returned.

**Note:** All parameters are evaluated, even the one that's not returned.

### Defined

XForms 1.1

### Gecko support

Supported.
true
====

The `true` function returns a boolean value of true.

### Syntax
```

true()
```

### Returns

Boolean `true`.

### Defined

XPath 1.0 4.3

### Gecko support

Supported.
key
===

The `key` function returns a node-set of nodes that have the given value for the given key.

### Syntax
```

key( keyname, value )
```

### Arguments

`keyname`

A string containing the name of the `xsl:key` element to be used.

`value`

The returned node-set will contain every node that has this value for the given key.

### Returns

A node set.

### Notes

* The `xsl:key` element defines what attribute on what given elements will be used to match the key.

This function is an XSLT-specific addition to XPath. It is not a part of the core XPath function library.

### Defined

XSLT 1.0 12.2

### Gecko support

Supported.
not
===

The `not` function evaluates a boolean expression and returns the opposite value.

### Syntax
```

not( expression )
```

### Arguments

`expression`

The expression is evaluated exactly as if it were passed as an argument to the boolean() function.

### Returns

True for an expression that evaluates to false; false for an expression that evaluates to true.

### Notes

* This function should behave similarly to the boolean() function except that it returns the opposite value.
* You can test if an element doesn't have some attribute.

```xml
<xsl:for-each match="//a[not(@name and @name = 'badname')]">
  <!-- iterates over any <a> element in the document, that
 either has no 'name' attribute at all, or it has one,
 but its value is not "badname". -->
</xsl:template>
```

### Defined

XPath 1.0 4.3

### Gecko support

Supported.
current
=======

The `current` function can be used to get the context node in an XSLT instruction.

### Syntax
```

current()
```

### Returns

A node-set containing only the current node.

### Notes

This function is an XSLT-specific addition to XPath. It is not a part of the core XPath function library.

For an outermost expression (an expression not occurring within another expression), the current node is always the same as the context node (which will be returned by the `.` or `self` syntax). The following two are semantically equivalent.


```xml
<xsl:value-of select="current()"/>
```



```xml
<xsl:value-of select="."/>
```


In an inner expression (e.g. in square brackets), the current node is still the same as it would have been in an outermost expression. Thus within all of the following three expressions the `current` function (not the entire expressions) returns the same node. Moreover, the latter two are semantically equivalent.


```xml
<xsl:value-of select="current()"/>
```



```xml
<xsl:value-of select="foo/bar[current() = X]"/>
```



```xml
<xsl:variable name="current" select="current()"/>
<xsl:value-of select="foo/bar[$current = X]"/>
```


And the next code is also semantically equivalent to the latter two, since the `.` occurs in an outermost expression.


```xml
<xsl:variable name="current" select="."/>
<xsl:value-of select="foo/bar[$current = X]"/>
```


But the `.` always relate to the narrowest context. Thus in


```xml
<xsl:value-of select="foo/bar[. = X]"/>
```


the `.` returns the `bar` node, which may be different from the current node.

### Defined

XSLT 1.0 12.4

### Gecko support

Supported.
local-name
==========

The `local-name` function returns a string representing the local name of the first node in a given node-set.

### Syntax
```

local-name( [node-set] )
```

### Arguments

`node-set` (optional)

The local name of the first node in this node-set will be returned. If this argument is omitted, the current context node will be used.

### Returns

A string.

### Notes

* The local name is the local part of an expanded-name.
### Defined

XPath 1.0 4.1

### Gecko support

Supported.
system-property
===============

The `system-property` function returns an object representing the given system-property.

### Syntax
```

system-property(name)
```

### Arguments

`name` (optional)

The name of the system property. The argument must evaluate to a string that is a QName. The QName is expanded into a name using the namespace declarations in scope for the expression. The system-property function returns an object representing the value of the system property identified by the name. If there is no such system property, the empty string should be returned.

### Returns

An object representing the given system-property.

### Notes

* xsl:version, a number giving the version of XSLT implemented by the processor; for XSLT processors implementing the version of XSLT specified by this document, this is the number 1.0
* xsl:vendor, a string identifying the vendor of the XSLT processor
* xsl:vendor-url, a string containing a URL identifying the vendor of the XSLT processor; typically this is the host page (home page) of the vendor's website.
### Defined

XSLT 1.0 12.4

### Gecko support

Supported.
Specification deviations
========================

There are a few places where we have consciously decided to make Gecko deviate from or extend the SVG specification. This page lists those deviations/extensions and our reasoning for them.

### The 'class' and 'style' attributes

Unlike HTML and MathML, the SVG specification does not specify the 'style' and 'class' attributes on all SVG elements. Nevertheless, to allow Mozilla to more cleanly share internal 'class' and 'style' related code, we will implement these attributes on all SVG elements as of Firefox 3. In general this change will not be visible to SVG authors (the elements for which the SVG specification does not define the 'class' and 'style' attribute are elements that are not displayed directly). However, there are two exceptions.

Extending the 'class' attribute to apply to all SVG elements will allow SVG authors to use the Selectors API to select *any* SVG element based on class. This seems like a good thing. Requiring SVG authors to know which elements can and cannot take a 'class' attribute would just put an extra burden on them.

Extending the 'style' attribute to apply to all SVG elements should only really be visible to SVG authors if they call ViewCSS.getComputedStyle on the element or one of its descendants. Since these elements and their descendants are not displayed, it seems unlikely that anyone will either specify 'style' or call getComputedStyle on them. Note that this extension does not mean that we add a css::CSSStyleDeclaration 'style' property to the DOM of elements that do not implement the SVGStylable interface.
SVG as an Image
===============

SVG images can be used as an image format, in a number of contexts. Browsers support SVG images in:

* HTML `<img>` or `<svg>` elements
* CSS `background-image`
* CSS `list-style-image`
* CSS `content`
* SVG `<image>` element
* SVG `<feImage>` element
* Canvas `drawImage` function
### Restrictions

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

* JavaScript is disabled.
* External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through data: Ls.
* `:visited`-link styles aren't rendered.
* Platform-native widget styling (based on OS theme) is disabled.

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the `<iframe>`, `<object>`, or `<embed>` elements.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |
Linking
=======

The `target` attribute on the SVG `<a>` element doesn't work in Mozilla Firefox 1.5. When SVG documents are embedded within a parent HTML document using the tag:

page1.html:


```html
<html lang="en">
  <body>
    <p>This is a SVG button:</p>
    <object width="100" height="50" type="image/svg+xml" data="button.svg" />
  </body>
</html>
```


button.svg:


```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <a href="page2.html" target="\_top">
    <g>
      <!-- button graphical elements here -->
    </g>
  </a>
</svg>
```


The specification says that the browser should navigate to the HTML document page2.html when the button graphics are clicked. However, `target` does not work with Mozilla's implementation of the SVG `<a>` element in Firefox 1.5. (The problem will be fixed in Firefox 2.0.)

Anyway, the resultant behavior in Moz SVG is that page2.html will be loaded into the frame where the SVG button was (i.e. you would now have page2.html embedded inside a 100x50 pixel frame inside page1.html).

To get around this, requires a little ugly JavaScript hacking:

button.svg:


```xml
<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g onclick="top.document.href='page2.html'" cursor="pointer">
    <!-- button graphical elements here -->
  </g>
</svg>
```

Example
-------

For an example of this solution at work see www.codedread.com.
SVG Tutorial
============

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics.

This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. Another good introduction to SVG is provided by the W3C's SVG Primer.

Introducing SVG from Scratch
----------------------------

* Introduction
* Getting Started
* Positions
* Basic Shapes
* Paths
* Fills and Strokes
* Gradients
* Patterns
* Texts
* Basic Transformations
* Clipping and masking
* Other content in SVG
* Filter effects
* SVG fonts
* SVG Image tag
* Tools for SVG
* SVG and CSS

The following topics are more advanced and hence should get their own tutorials.

Scripting SVG with JavaScript
-----------------------------

TBD

SVG filters tutorial
--------------------

TBD

Animations with SMIL in SVG
---------------------------

TBD

Creating fonts in SVG
---------------------

TBD
<feImage>
=========

The **`<feImage>`** SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)

Usage context
-------------

|  |  |
| --- | --- |
| Categories | Filter primitive element |
| Permitted content | Any number of the following elements, in any order:`<animate>`, `<animateTransform>`, `<set>` |

Attributes
----------

### Global attributes

* Core attributes
* Presentation attributes
* Filter primitive attributes
* XLink attributes
* `class`
* `style`
### Specific attributes

* `crossorigin`
* `preserveAspectRatio`
* `xlink:href` 
Deprecated
DOM Interface
-------------

This element implements the `SVGFEImageElement` interface.

Example
-------

### SVG


```html
<svg
 viewBox="0 0 200 200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <defs>
    <filter id="image">
      <feImage href="mdn\_logo\_only\_color.png" />
    </filter>
  </defs>

  <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
</svg>
```

### Result

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

| Specification |
| --- |
| Filter Effects Module Level 1 # feImageElement |

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<animateTransform>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* SVG tutorial: Filter effects
<feTile>
========

The **`<feTile>`** SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a `<pattern>`.

Usage context
-------------

|  |  |
| --- | --- |
| Categories | Filter primitive element |
| Permitted content | Any number of the following elements, in any order:`<animate>`, `<set>` |

Attributes
----------

### Global attributes

* Core attributes
* Presentation attributes
* Filter primitive attributes
* `class`
* `style`
### Specific attributes

* `in`
DOM Interface
-------------

This element implements the `SVGFETileElement` interface.

Example
-------

### SVG


```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>
    Tiling an MDN logo with the Mozilla mascot's head that is on the logo
  </title>
  <defs>
    <!-- Define the region of the filter to be the bounding box of the
 MDN logo being filtered. These parameters will create an output
 that covers the same region as the image. -->
    <filter id="tile" x="0" y="0" width="100%" height="100%">
      <!-- Create a tile from the central portion of the image from
 (50,50) to (150,150). This area is essentially the Mozilla
 mascot's head. -->
      <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" />

      <!-- Without specifying a region, feTile defaults to the region
 of the filter. Without specifying an "in" parameter, the default
 is the result of the previous primitive. So this second feTile
 will tile the entire filter region with the mascot's head. -->
      <feTile />
    </filter>
  </defs>

  <!-- Use the MDN logo as input to the filter -->
  <image
 href="mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%"
 style="filter:url(#tile);" />
</svg>
```

### Result

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

| Specification |
| --- |
| Filter Effects Module Level 1 # feTileElement |

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

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

See also
--------

* `<filter>`
* `<animate>`
* `<set>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTurbulence>`
* SVG tutorial: Filter effects
<animateMotion>
===============

The SVG **`<animateMotion>`** element provides a way to define how an element moves along a motion path.

**Note:** To reuse an existing path, it will be necessary to use an `<mpath>` element inside the `<animateMotion>` element instead of the `path` attribute.

Example
-------
```

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
```



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="lightgrey"
 d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
 dur="10s"
 repeatCount="indefinite"
 path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>
```

Usage context
-------------

|  |  |
| --- | --- |
| Categories | Animation element |
| Permitted content | Any number of the following elements, in any order:Descriptive elements`<mpath>` |

Attributes
----------

`keyPoints`

 This attribute indicate, in the range [0,1], how far is the object along the path for each `keyTimes` associated values.
 *Value type*: **<number>**\*; *Default value*: none; *Animatable*: **no**

`path`

 This attribute defines the path of the motion, using the same syntax as the `d` attribute.
 *Value type*: **<string>**; *Default value*: none; *Animatable*: **no**

`rotate`

 This attribute defines a rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation.
 *Value type*: **<number>**|`auto`|`auto-reverse`; *Default value*: `0`; *Animatable*: **no**



**Note:** For `<animateMotion>`, the default value for the `calcMode` attribute is `paced`.

### Animation Attributes

Animation timing attributes
`begin`, `dur`, `end`, `min`, `max`, `restart`, `repeatCount`, `repeatDur`, `fill`
Animation value attributes
`calcMode`, `values`, `keyTimes`, `keySplines`, `from`, `to`, `by`
Other Animation attributes

Most notably: `attributeName`, `additive`, `accumulate`

Animation event attributes

Most notably: `onbegin`, `onend`, `onrepeat`

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

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

This element implements the `SVGAnimateMotionElement` interface.

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

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

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

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

See also
--------

* `<mpath>`