Sideway
output.to from Sideway
Draft for Information Only

Content

<a>
Example
Attributes
  Global attributes
Usage notes
Specifications
 Sources and References

<a>

The <a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML’s <a> element.

SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.

Example

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
   <style type='text/css'>
       @namespace svg url(http://www.w3.org/2000/svg);
   html,body,svg { height:400 }

   /* As SVG does not provide a default visual style for links,
       it's considered best practice to add some */

   @namespace svg url(http://www.w3.org/2000/svg);
   /* Necessary to select only SVG <a> elements, and not also HTML’s.
       See warning below */
   svg|a:link, svg|a:visited {
       cursor: pointer;
   }

   svg|a text,
   text svg|a {
       fill: blue; /* Even for text, SVG uses fill over color */
       text-decoration: underline;
   }

   svg|a:hover, svg|a:active {
       outline: dotted 1px blue;
   }
   </style>
    
    
<svg style='border:1px solid black' width='480' height='450' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='426' height='426' viewBox='-25, -25, 426, 426' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg transform='scale(0.938967136150235)' preserveAspectRatio='xMinYMin' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
       <!-- A link around a shape -->
       <a href='http://output.to'>
           <circle cx='50' cy='40' r='35'/>
       </a>

       <!-- A link around a text -->
       <a href='http://output.to'>
           <text x='50' y='90' text-anchor='middle'>
               &lt;circle&gt;
           </text>
       </a>
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='395' y='17' font-size='20'>(100,0)</text>
<text x='5' y='445' font-size='20'>(0,100)</text>
<text x='395' y='445' font-size='20'>(100,100)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='425' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='425' cy='425' r='2' fill='black'/>
</svg>
    
HTML Web Page Embedded Output:

Attributes

download Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. Value type: <string> ; Default value: none; Animatable: no href The URL or URL fragment the hyperlink points to. Value type: <URL> ; Default value: none; Animatable: yes hreflang The human language of the URL or URL fragment that the hyperlink points to. Value type: <string> ; Default value: none; Animatable: yes ping A space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see Navigator.sendBeacon(). Value type: <list-of-URLs> ; Default value: none; Animatable: no referrerpolicy Which referrer to send when fetching the URL. Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no rel The relationship of the target object to the link object. Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes target Where to display the linked URL. Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes type A MIME type for the linked URL. Value type: <string> ; Default value: none; Animatable: yes xlink:href The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers. Value type: <URL> ; Default value: none; Animatable: yes

Global attributes

Core Attributes Most notably: id, lang, tabindex Styling Attributes class, style Conditional Processing Attributes Most notably: requiredExtensions, systemLanguage Event Attributes Global event attributes, Document element event attributes, Graphical event attributes Presentation Attributes Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility XLink Attributes Most notably: xlink:title ARIA Attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Specifications

Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)

Sources and References

  • https://www.w3.org/TR/SVG2/linking.html
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a

©sideway

ID: 220100005 Last Updated: 1/5/2022 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019