Questions tagged [xlink]

XLink is a web standard for creating hyperlinks to navigate an XML document.

XLink (XML Linking Language) is a web standard for creating hyperlinks to navigate an XML document.
XLink defines a set of attributes that may be added to elements of other XML namespaces.
XLink provides two kinds of hyperlinking for use in XML documents. Simple links connect only two resources, similar to HTML links. Extended links can link an arbitrary number of resources.

Simple links:

A simple link creates a unidirectional hyperlink from one element to another via a URI. Example:

<?xml version="1.0"?>
<document xmlns="http://example.org/xmlns/2002/document" xmlns:xlink="http://www.w3.org/1999/xlink">
  <heading id="someHeading">Some Document</heading>
  <para>Here is <anchor xlink:type="simple" xlink:href="#someHeading">a link</anchor> to the header.</para>
  <para>It is an anchor that points to the element with the id "someHeading" on the current page.</para>
</document>

Extended links:

Extended links allow multiple resources, either remote or local, to be connected by multiple arcs. An arc is information about the origin, destination and behavior of a link between two resources. The origin and destination resources are defined by labels. By using one or more arcs, an extended link can achieve specific sets of connections between multiple resources.

Useful references:

157 questions
53
votes
3 answers

Is it possible to use HTML's .querySelector() to select by xlink attribute in an SVG?

Given: Is it possible to use the HTML DOM's .querySelector() or .querySelectorAll() to select the…
stephband
  • 2,594
  • 2
  • 23
  • 33
30
votes
1 answer

SVG Namespace prefix xlink for href on image is not defined

I've an svg content that looks a bit like this:
kabrice
  • 1,475
  • 6
  • 27
  • 51
15
votes
1 answer

d3 append an image with svg extension

I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3). This is the code: d3.select("#chart1 svg") .append("svg:image") .attr("xlink:href", "img/icons/sun.svg") .attr("width", 40) .attr("height",…
Emilio
  • 1,024
  • 4
  • 16
  • 33
13
votes
1 answer

Getting 'xlink:href' attribute of the SVG element dynamically using JS in HTML DOM

I have a construction:
I want to get pic.jpg url and…
Green
  • 28,742
  • 61
  • 158
  • 247
11
votes
2 answers

Ampersands (&) in xlink:href attributes of SVG images?

I'm building an SVG document which contains various image tags. The xlink:href (source URL) attributes for the images contain query strings with ampersands. If I escape them as %26 or the ascii encoding ? they're not valid query strings and the…
Peter K.
  • 151
  • 1
  • 6
8
votes
1 answer

SVG from a CDN

I am using the to reference my svg file. It works fine on my local but throws an error (CORS) when I reference it from a CDN. It looks as though the xlink:href doesn't allow the CORS request but I am wondering if there is any…
Omar Zeidan
  • 133
  • 7
7
votes
3 answers

How to select XML element by xlink:href attribute with CSS?

Does anyone know how to select a XML element by xlink:href attribute with CSS? See here for the usage, however it doesn't explain how to select it with CSS.
user3143218
  • 1,738
  • 5
  • 32
  • 48
6
votes
1 answer

How to link from SVG?

What I tried is this Mail Order Ponies and variations with href and type="simple". The link text appears, but the link is not…
Ludwig Weinzierl
  • 15,980
  • 10
  • 45
  • 49
6
votes
1 answer

Can an SVG included in HTML with an "img" tag have a link to an external image with the "image" tag?

I have the following file, image.svg, along with a file bitmap.png in the same spot on a server:
Philihp Busby
  • 4,389
  • 4
  • 23
  • 19
5
votes
2 answers

xlink:href attribute on tag throws typescript error when used in tsx file

I have simple code that includes svg icon with tag into web-component created with stencjiljs (tsx syntax). However, when I add xlink:href attribute to tag I get error Identifier expected. Example code: import { Component, Prop } from…
pennyroyal
  • 230
  • 3
  • 12
5
votes
1 answer

SVG Absolute Pathing for `xlink:href` Attribute Not Working

So I have a single SVG file that holds a collection of different paths: ... and within my…
Nick Zuber
  • 5,467
  • 3
  • 24
  • 48
5
votes
1 answer

Adding to SVG path objects programmatically

I have a problem using the JavaScript in order to wrap anchor tags around a path object within SVG. So, here is the SVG I have (shortened version, with just two paths) with ids: "striatum1" and "striatum2" In case of path with id "striatum1" I have…
Tomasz
  • 73
  • 6
5
votes
1 answer

Set the xlink:href attribute of an svg element with CSS

I need to set the 'xlink:href' attribute on an svg element, described here. Can I do this with CSS?
Cabbage soup
  • 1,344
  • 1
  • 18
  • 26
5
votes
1 answer

Avoiding the clipping of symbols in SVG

For my use it would be convenient for me to have a list of SVG symbols centered on zero, making their placement with use easier. For example a symbol which is simply a circle would have its center at zero and then a given radius. However with the…
Owen Ransen
  • 369
  • 2
  • 11
5
votes
1 answer

Dynamic creation of SVG links in JavaScript

I am dynamically creating SVG elements from JavaScript. It's working fine for visual objects like a rectangle, but I'm having trouble producing functioning xlinks. In the example below the first rectangle (which is statically defined) works…
user2837568
  • 53
  • 1
  • 3
1
2 3
10 11