Html и svg ссылка

href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.

Note: Specifications before SVG 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. If you need to support earlier browser versions, the deprecated xlink:href attribute can be used as a fallback in addition to the href attribute, e.g. .

You can use this attribute with the following SVG elements:

Example

html, body, svg  height: 100%; > 

svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> a href="https://developer.mozilla.org/"> text x="10" y="25">MDN Web Docstext> a> svg> 

In SVG

a

animate, animateMotion, animateTransform, set

The URL must point to exactly one target element which is capable of being the target of the given animation element. If the URL points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current document, then the animation element will not affect any target element. However, the animation element will still operate normally with regard to its timing properties. Specifically, TimeEvents are dispatched and the animation element can be used as syncbase in an identical fashion to when the URL refers to a valid target element.

If the href attribute or the deprecated xlink:href attribute is not provided, then the target element will be the immediate parent element of the current animation element. If both xlink:href and href are specified, the value of the latter attribute is used.

Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation specification. In particular, see SMIL Animation: Specifying the animation target.

feImage

For , href defines a URL referring to an image resource or to an element. If both, the xlink:href and the href attribute are specified, the latter overrides the former.

image

html, body, svg  height: 100%; > 

svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> image href="fxlogo.png" x="0" y="0" height="100" width="100" /> svg> 

linearGradient

mpath

pattern

radialGradient

script

textPath

use

The element can reference an entire SVG document by specifying an href value without a fragment. Such references are taken to be referring to the root element of the referenced document.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Html и svg ссылка

SVG элемент создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML .

@namespace svg url(http://www.w3.org/2000/svg); html,body,svg  height:100% > 

svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> a href="/docs/Web/SVG/Element/circle"> circle cx="50" cy="40" r="35"/> a> a href="/docs/Web/SVG/Element/text"> text x="50" y="90" text-anchor="middle"> <circle> text> a> svg> 

/* Так как SVG не предоставляет визуальных стилей по умолчанию для ссылок, будет лучше задать самостоятельно */ @namespace svg url(http://www.w3.org/2000/svg); /* Необходимо выделить только SVG элементы , но не HTML. Смотрите предупреждение ниже */ svg|a:link, svg|a:visited  cursor: pointer; > svg|a text, text svg|a  fill: blue; /* Даже для текста SVG использует заливку */ text-decoration: underline; > svg|a:hover, svg|a:active  outline: dotted 1px blue; > 

Предупреждение: Поскольку этот элемент разделяет своё имя с элементом HTML , выбор a через CSS или querySelector может выбрать не тот тип элемента. Попробуйте правило @namespace , чтобы разделять их.

Атрибуты

Указывает браузеру выполнить загрузку по URL, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально. Тип: ;Значение по умолчанию: none;Анимируем: нет

svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  a href="/docs/Web/SVG/Element/circle"> circle cx="50" cy="40" r="35"/> a>  a href="/docs/Web/SVG/Element/text"> text x="50" y="90" text-anchor="middle"> <circle> text> a> svg> 

/ * Поскольку SVG не предоставляет визуальный стиль по умолчанию для ссылок, рекомендуется добавить некоторые * / @namespace svg url(http://www.w3.org/2000/svg); /* Необходимо выбрать только элементы SVG , а не элементы HTML. См. предупреждение ниже */ svg|a:link, svg|a:visited < cursor: pointer; > svg|a text, text svg|a < fill: blue; / * Даже для текста SVG использует заливку поверх цвета * / text-decoration: underline; > svg|a:hover, svg|a:active < outline: dotted 1px blue; >