<a>
åºçº¿
广æ³å¯ç¨
*
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
<a> SVG å
ç´ ç¨äºå建æåå
¶ä»ç½é¡µãæä»¶ãåä¸é¡µé¢ä¸çä½ç½®ãçµåé®ä»¶å°åæä»»ä½å
¶ä» URL çè¶
龿¥ãå®ä¸ HTML ç <a> å
ç´ é常ç¸ä¼¼ã
SVG ç <a> å
ç´ æ¯ä¸ä¸ªå®¹å¨ï¼è¿æå³çä½ å¯ä»¥åå¨ HTML ä¸ä¸æ ·ä¸ºææ¬åå»ºé¾æ¥ï¼ä¹å¯ä»¥ä¸ºä»»æå½¢ç¶åå»ºé¾æ¥ã
使ç¨ä¸ä¸æ
| ç±»å« | 容å¨å ç´ |
|---|---|
| å 许çå 容 | ä»»ææ°éãä»»æé¡ºåºçä¸åå
ç´ ï¼ å¨ç»å ç´ æè¿°æ§å ç´ å½¢ç¶å ç´ ç»æåå ç´ æ¸åå ç´ <a>ã<clipPath>ã<filter>ã<foreignObject>ã<image>ã<marker>ã<mask>ã<pattern>ã<script>ã<style>ã<switch>ã<text>ã<view> |
屿§
download-
æç¤ºæµè§å¨ä¸è½½ URLï¼è䏿¯å¯¼èªå°è¯¥å°åï¼ä»èæç¤ºç¨æ·å°å ¶ä¿å为æ¬å°æä»¶ãå¼ç±»åï¼<string>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦
href-
è¶ é¾æ¥ææåç URL æ URL çæ®µãå¼ç±»åï¼<URL>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼æ¯
hreflang-
è¶ é¾æ¥ææåç URL æ URL çæ®µç人类è¯è¨ãå¼ç±»åï¼<string>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦
interestfor-
å°
<a>å ç´ å®ä¹ä¸ºå ³æ³¨è§¦åå¨ãå ¶å¼ä¸ºç®æ å ç´ çidï¼å½è§¦åå¨å ç´ è·å¾æå¤±å»å ³æ³¨æ¶ï¼ä¾å¦éè¿æ¬å/åæ¶æ¬åæèç¦/åæ¶èç¦ï¼ï¼è¯¥ç®æ å ç´ å°åå°æç§å½±åï¼é常表ç°ä¸ºæ¾ç¤ºæéèï¼ãæ´å¤ç»èå示ä¾è¯·åé 使ç¨å ³æ³¨è§¦åå¨ãå¼ç±»åï¼<string>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦ ping-
ä»¥ç©ºæ ¼åéç URL å表ï¼è·éè¶ é¾æ¥æ¶ï¼æµè§å¨ä¼å¨åå°åè¿äº URL å鿣æä¸º
PINGçPOST请æ±ãé常ç¨äºè·è¸ªãè¥éåè½ç¸å䏿¯ææ´å¹¿æ³çç¹æ§ï¼è¯·åè§Navigator.sendBeacon()ãå¼ç±»åï¼<list-of-URLs>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦ referrerpolicy-
è·å URL æ¶è¦åéåªä¸ª referrerãå¼ç±»åï¼
no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-urlï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦ rel-
ç®æ 对象ä¸é¾æ¥å¯¹è±¡ä¹é´çå ³ç³»ãå¼ç±»åï¼<list-of-Link-Types>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦
target-
å¨ä½å¤æ¾ç¤ºæé¾æ¥ç URLãå¼ç±»åï¼
_self|_parent|_top|_blank| <XML-Name>ï¼é»è®¤å¼ï¼_selfï¼å¨ç»æ§ï¼æ¯ type-
æé¾æ¥ URL ç MIME ç±»åãå¼ç±»åï¼<string>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼å¦
xlink:href-
è¶ é¾æ¥ææåç URL æ URL çæ®µãä¸ºå ¼å®¹æ§çæµè§å¨ï¼å¯è½ä»éè¦æ¤å±æ§ãå¼ç±»åï¼<URL>ï¼é»è®¤å¼ï¼æ ï¼å¨ç»æ§ï¼æ¯
DOM æ¥å£
该å
ç´ å®ç°äº SVGAElement æ¥å£ã
示ä¾
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- å´ç»å½¢ç¶ç龿¥ -->
<a href="/docs/Web/SVG/Reference/Element/circle">
<circle cx="50" cy="40" r="35" />
</a>
<!-- å´ç»ææ¬ç龿¥ -->
<a href="/docs/Web/SVG/Reference/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 ç <a> å
ç´ ï¼è䏿¯ HTML ç <a>ãåè§ä¸æ¹è¦å */
svg|a:link,
svg|a:visited {
cursor: pointer;
}
svg|a text,
text svg|a {
fill: blue; /* å³ä½¿æ¯ææ¬ï¼SVG ä¹ä½¿ç¨ fill èé color */
text-decoration: underline;
}
svg|a:hover,
svg|a:active {
outline: dotted 1px blue;
}
è¦åï¼ç±äºæ¤å
ç´ ä¸ HTML ç <a> å
ç´ å
±ç¨æ ç¾åï¼ä½¿ç¨ CSS æ querySelector éæ© a æ¶å¯è½ä¼éä¸é误类åçå
ç´ ãå¯å°è¯ä½¿ç¨ @namespace è§åæ¥åºåäºè
ã
è§è
| è§è |
|---|
| Scalable Vector Graphics (SVG) 2 > # Links > |
æµè§å¨å ¼å®¹æ§
åè§
xlink:title屿§- HTML
<a>å ç´