From 5338367ea3a4fb256ce1e670cb6cdb0599bd2f77 Mon Sep 17 00:00:00 2001
From: Cyrbuzz <cyrbuzz@foxmail.com>
Date: Thu, 20 Apr 2023 18:42:15 +0800
Subject: [PATCH] fix(Watermark): add xlink namespace and fix blob MIME type
 (#11762)

* fix(watermark): add xlink namespace and fix blob MIME type

* test(watermark): test snapshots
---
 packages/vant/src/watermark/Watermark.tsx              | 10 +++++++++-
 .../watermark/test/__snapshots__/index.spec.ts.snap    |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/vant/src/watermark/Watermark.tsx b/packages/vant/src/watermark/Watermark.tsx
index f4133e8f5..4a89516cd 100644
--- a/packages/vant/src/watermark/Watermark.tsx
+++ b/packages/vant/src/watermark/Watermark.tsx
@@ -57,6 +57,10 @@ export default defineComponent({
           return (
             <image
               href={imageBase64.value}
+              // Compatite for versions below Safari 12
+              // More detail: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
+              // @ts-ignore
+              xlink:href={imageBase64.value}
               x="0"
               y="0"
               width={props.width}
@@ -92,6 +96,9 @@ export default defineComponent({
           width={svgWidth}
           height={svgHeight}
           xmlns="http://www.w3.org/2000/svg"
+          // xlink namespace for compatite image xlink attribute
+          // @ts-ignore
+          xmlns:xlink="http://www.w3.org/1999/xlink"
           style={{
             padding: `0 ${props.gapX}px ${props.gapY}px 0`,
             opacity: props.opacity,
@@ -118,8 +125,9 @@ export default defineComponent({
     };
 
     const makeSvgToBlobUrl = (svgStr: string) => {
+      // svg MIME type: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
       const svgBlob = new Blob([svgStr], {
-        type: 'image/svg+xml;charset=utf-8',
+        type: 'image/svg+xml',
       });
       return URL.createObjectURL(svgBlob);
     };
diff --git a/packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap
index e0c656263..cd9edea6f 100644
--- a/packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`watermark should render content 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
          style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
@@ -38,6 +39,7 @@ exports[`watermark should render html 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
          style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
@@ -65,9 +67,11 @@ exports[`watermark should render image 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
          style="padding: 0px 0px 0px 0px; opacity: 0.5;"
     >
       <image href="base64Url"
+             xlink:href="base64Url"
              x="0"
              y="0"
              width="100"
@@ -89,6 +93,7 @@ exports[`watermark test false value fullPage 1`] = `
          width="100"
          height="100"
          xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
          style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"
@@ -116,6 +121,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
          width="20"
          height="20"
          xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
          style="padding: 0px 0px 0px 0px;"
     >
       <foreignObject x="0"