Skip to content

Commit

Permalink
Fix anchors in SVG
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh-Cena committed Jul 1, 2024
1 parent 991385e commit f5d01d9
Show file tree
Hide file tree
Showing 14 changed files with 19 additions and 19 deletions.
2 changes: 1 addition & 1 deletion files/en-us/web/accessibility/seizure_disorders/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ The methods for sniffing them out is not a casual exercise. You may be intereste
- **JPG (Raster)**
- **MNG (Raster)**: Multiple-image Network Graphics is a graphics file format for animated images. Also considered by some to be a video format.
- **PNG, APNG (Raster)**: Portable Network Graphics and Animated Portable Network Graphics may both be animated.
- **SVGs (Vector)**: The MDN document, ["SVG: Scalable Vector Graphics"](/en-US/docs/Web/SVG), notes that _"SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as [CSS](/en-US/docs/Web/CSS), [DOM](/en-US/docs/Web/API/Document_Object_Model), and [SMIL](/en-US/docs/Web/SVG/SVG_animation_with_SMIL)."_ SVGs can be used as an image like in this example: `<img src="example.svg" alt="This is an image using a svg as a source">`. This means that SVG appearance and animation can be controlled through CSS keyframes and animations. For interaction with JavaScript, see the MDN documents on [SVG Interfaces](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces) and [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content).
- **SVGs (Vector)**: The MDN document, ["SVG: Scalable Vector Graphics"](/en-US/docs/Web/SVG), notes that _"SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as [CSS](/en-US/docs/Web/CSS), [DOM](/en-US/docs/Web/API/Document_Object_Model), and [SMIL](/en-US/docs/Web/SVG/SVG_animation_with_SMIL)."_ SVGs can be used as an image like in this example: `<img src="example.svg" alt="This is an image using a svg as a source">`. This means that SVG appearance and animation can be controlled through CSS keyframes and animations. For interaction with JavaScript, see the MDN documents on [SVG Interfaces](/en-US/docs/Web/API/Document_Object_Model#svg_dom) and [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content).
- **Voxel (Raster)**: Three-dimensional [voxel](https://en.wikipedia.org/wiki/Voxel) raster graphics are employed in video games, as well as in medical imaging.

#### Text can also be animated
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ pre.target:hover {

### Example: Blurred Text

In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also [CSS filter](/en-US/docs/Web/CSS/filter#blur%28%29_2)). You can achieve the same effect using SVG filters.
In order to blur text, there is a CSS filter function called [`blur()`](/en-US/docs/Web/CSS/filter-function/blur). You can achieve the same effect using SVG filters.

```html
<p class="blur">Time to clean my glasses</p>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/attribute/clip-rule/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ As a presentation attribute, it also can be used as a property directly inside a

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

- [Graphical elements](/en-US/docs/Web/SVG/Element#graphical) »
- [Graphics elements](/en-US/docs/Web/SVG/Element#graphics_elements)

## Browser compatibility

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/attribute/crossorigin/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ This table shows possible keywords and their meaning:
| `use-credentials` | Client CORS requests for this element will have the credentials flag set to 'include'. |
| `""` | Setting the attribute name to an empty value, like `crossorigin` or `crossorigin=""`, is the same as `anonymous`. |

It follows the same processing rules as the HTML attribute [`crossorigin`](/en-US/docs/Web/HTML/Global_attributes#crossorigin).
It follows the same processing rules as the HTML attribute [`crossorigin`](/en-US/docs/Web/HTML/Attributes/crossorigin).

## Example

Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/svg/attribute/d/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ For {{SVGElement('path')}}, `d` is a string containing a series of path commands
<tr>
<th scope="row">Value</th>
<td>
<strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
<strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
</td>
</tr>
<tr>
Expand All @@ -75,7 +75,7 @@ For {{SVGElement('glyph')}}, `d` is a string containing a series of path command
<tr>
<th scope="row">Value</th>
<td>
<strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
<strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
</td>
</tr>
<tr>
Expand All @@ -102,7 +102,7 @@ For {{SVGElement('missing-glyph')}}, `d` is a string containing a series of path
<tr>
<th scope="row">Value</th>
<td>
<strong><a href="/en-US/docs/Web/SVG/Content_type#string">&#x3C;string></a></strong>
<strong><a href="/en-US/docs/Web/CSS/string">&#x3C;string></a></strong>
</td>
</tr>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/attribute/u1/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ You can use this attribute with the following SVG elements:
<a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar">|</a>
<code>&#x3C;urange></code>
<a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">]</a
><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark)"
>#</a
>
</td>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/attribute/u2/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ You can use this attribute with the following SVG elements:
<a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar">|</a>
<code>&#x3C;urange></code>
<a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">]</a
><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark"
>#</a
>
</td>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/attribute/unicode-range/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ You can use this attribute with the following SVG elements:
<td>
<code
>&#x3C;urange><a
href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark_()"
href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark"
title="The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (&#x27;,&#x27;)."
>#</a
></code
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/element/animatemotion/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ svg {
- : {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}
- [Other Animation attributes](/en-US/docs/Web/SVG/Attribute#animation_attributes)
- : Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
- [Animation event attributes](/en-US/docs/Web/SVG/Attribute#animation_event_attributes)
- [Animation event attributes](/en-US/docs/Web/SVG/Attribute#event_attributes)
- : Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}

## Usage notes
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/element/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,6 @@ SVG drawings and images are created using a wide array of elements which are ded

- [SVG attribute reference](/en-US/docs/Web/SVG/Attribute)
- [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial)
- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces)
- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom)

{{SVGRef}}
4 changes: 2 additions & 2 deletions files/en-us/web/svg/element/script/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ Click the circle to change colors.

- [`crossorigin`](/en-US/docs/Web/HTML/Element/script#crossorigin)
- : This attribute defines [CORS settings](/en-US/docs/Web/HTML/Attributes/crossorigin) as define for the HTML {{HTMLElement('script')}} element.
_Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `?`; _Animatable_: **yes**
_Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `?`; _Animatable_: **yes**
- {{SVGAttr("href")}}
- : The {{Glossary("URL")}} to the script to load.
_Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**
- {{SVGAttr("type")}}
- : This attribute defines type of the script language to use.
_Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `application/ecmascript`; _Animatable_: **no**
_Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `application/ecmascript`; _Animatable_: **no**
- {{SVGAttr("xlink:href")}} {{deprecated_inline}}
- : The {{Glossary("URL")}} to the script to load.
_Value type_: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; _Default value_: _none_; _Animatable_: **no**
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/svg/element/style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ svg {

- {{SVGAttr("type")}}
- : This attribute defines type of the style sheet language to use as a media type string.
_Value type_: [**\<string>**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `text/css`; _Animatable_: **no**
_Value type_: [**\<string>**](/en-US/docs/Web/CSS/string); _Default value_: `text/css`; _Animatable_: **no**
- {{SVGAttr("media")}}
- : This attribute defines to which {{cssxref('@media', 'media')}} the style applies.
_Value type_: [**`<string>`**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: `all`; _Animatable_: **no**
_Value type_: [**`<string>`**](/en-US/docs/Web/CSS/string); _Default value_: `all`; _Animatable_: **no**
- {{SVGAttr("title")}}
- : This attribute is the title of the style sheet which can be used to switch between [alternate style sheets](/en-US/docs/Web/CSS/Alternative_style_sheets).
_Value type_: [**`<string>`**](/en-US/docs/Web/SVG/Content_type#string); _Default value_: _none_; _Animatable_: **no**
_Value type_: [**`<string>`**](/en-US/docs/Web/CSS/string); _Default value_: _none_; _Animatable_: **no**

## Usage context

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ See also, [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial).
- : Details about each SVG element.
- [SVG attribute reference](/en-US/docs/Web/SVG/Attribute)
- : Details about each SVG attribute.
- [SVG DOM interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces)
- [SVG DOM interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom)
- : Details about the SVG DOM API, for interaction with JavaScript.
- [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
- : SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/svg/tutorial/introduction/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Before starting you should have a basic understanding of XML or another markup l
- SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).
- Attribute values in SVG must be placed inside quotes, even if they are numbers.

SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar, you should be able to use the [Element Reference](/en-US/docs/Web/SVG/Element) and the [Interface Reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces) to find out anything else you need to know.
SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar, you should be able to use the [Element Reference](/en-US/docs/Web/SVG/Element) and the [Interface Reference](/en-US/docs/Web/API/Document_Object_Model#svg_dom) to find out anything else you need to know.

## Flavors of SVG

Expand Down

0 comments on commit f5d01d9

Please sign in to comment.