fix: take <a> in SVG into account (#1850)

Author: sapphi-red

src/client/app/composables/preFetch.ts

@@ -73,32 +73,40 @@ export function usePrefetch() {
     })
 
     rIC(() => {
-      document.querySelectorAll<HTMLAnchorElement>('#app a').forEach((link) => {
-        const { target, hostname, pathname } = link
-        const extMatch = pathname.match(/\.\w+$/)
-        if (extMatch && extMatch[0] !== '.html') {
-          return
-        }
+      document
+        .querySelectorAll<HTMLAnchorElement | SVGAElement>('#app a')
+        .forEach((link) => {
+          const { target } = link
+          const { hostname, pathname } = new URL(
+            link.href instanceof SVGAnimatedString
+              ? link.href.animVal
+              : link.href,
+            link.baseURI
+          )
+          const extMatch = pathname.match(/\.\w+$/)
+          if (extMatch && extMatch[0] !== '.html') {
+            return
+          }
 
-        if (
-          // only prefetch same tab navigation, since a new tab will load
-          // the lean js chunk instead.
-          target !== `_blank` &&
-          // only prefetch inbound links
-          hostname === location.hostname
-        ) {
-          if (pathname !== location.pathname) {
-            observer!.observe(link)
-          } else {
-            // No need to prefetch chunk for the current page, but also mark
-            // it as already fetched. This is because the initial page uses its
-            // lean chunk, and if we don't mark it, navigation to another page
-            // with a link back to the first page will fetch its full chunk
-            // which isn't needed.
-            hasFetched.add(pathname)
+          if (
+            // only prefetch same tab navigation, since a new tab will load
+            // the lean js chunk instead.
+            target !== `_blank` &&
+            // only prefetch inbound links
+            hostname === location.hostname
+          ) {
+            if (pathname !== location.pathname) {
+              observer!.observe(link)
+            } else {
+              // No need to prefetch chunk for the current page, but also mark
+              // it as already fetched. This is because the initial page uses its
+              // lean chunk, and if we don't mark it, navigation to another page
+              // with a link back to the first page will fetch its full chunk
+              // which isn't needed.
+              hasFetched.add(pathname)
+            }
           }
-        }
-      })
+        })
     })
   }
 

src/client/app/router.ts

@@ -153,9 +153,21 @@ export function createRouter(
         const button = (e.target as Element).closest('button')
         if (button) return
 
-        const link = (e.target as Element).closest('a')
-        if (link && !link.closest('.vp-raw') && !link.download) {
-          const { href, origin, pathname, hash, search, target } = link
+        const link = (e.target as Element | SVGElement).closest<
+          HTMLAnchorElement | SVGAElement
+        >('a')
+        if (
+          link &&
+          !link.closest('.vp-raw') &&
+          (link instanceof SVGElement || !link.download)
+        ) {
+          const { target } = link
+          const { href, origin, pathname, hash, search } = new URL(
+            link.href instanceof SVGAnimatedString
+              ? link.href.animVal
+              : link.href,
+            link.baseURI
+          )
           const currentUrl = window.location
           const extMatch = pathname.match(/\.\w+$/)
           // only intercept inbound links
@@ -217,8 +229,8 @@ export function useRoute(): Route {
   return useRouter().route
 }
 
-function scrollTo(el: HTMLElement, hash: string, smooth = false) {
-  let target: HTMLElement | null = null
+function scrollTo(el: HTMLElement | SVGElement, hash: string, smooth = false) {
+  let target: HTMLElement | SVGElement | null = null
 
   try {
     target = el.classList.contains('header-anchor')