blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Watermark): add xlink namespace and fix blob MIME type (#11762)

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

* test(watermark): test snapshots
This commit is contained in:
Cyrbuzz 2023-04-20 18:42:15 +08:00 committed by GitHub
parent 5e4bbab00c
commit 5338367ea3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/vant/src/watermark/Watermark.tsx
View File

@ -57,6 +57,10 @@ export default defineComponent({
return ( return (
<image <image
href={imageBase64.value} 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" x="0"
y="0" y="0"
width={props.width} width={props.width}
@ -92,6 +96,9 @@ export default defineComponent({
width={svgWidth} width={svgWidth}
height={svgHeight} height={svgHeight}
xmlns="http://www.w3.org/2000/svg" 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={{ style={{
padding: `0 ${props.gapX}px ${props.gapY}px 0`, padding: `0 ${props.gapX}px ${props.gapY}px 0`,
opacity: props.opacity, opacity: props.opacity,
@ -118,8 +125,9 @@ export default defineComponent({
}; };
const makeSvgToBlobUrl = (svgStr: string) => { 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], { const svgBlob = new Blob([svgStr], {
type: 'image/svg+xml;charset=utf-8', type: 'image/svg+xml',
}); });
return URL.createObjectURL(svgBlob); return URL.createObjectURL(svgBlob);
}; };

6
packages/vant/src/watermark/test/__snapshots__/index.spec.ts.snap
View File

@ -9,6 +9,7 @@ exports[`watermark should render content 1`] = `
width="100" width="100"
height="100" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="padding: 0px 0px 0px 0px;" style="padding: 0px 0px 0px 0px;"
> >
<foreignObject x="0" <foreignObject x="0"
@ -38,6 +39,7 @@ exports[`watermark should render html 1`] = `
width="100" width="100"
height="100" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="padding: 0px 0px 0px 0px;" style="padding: 0px 0px 0px 0px;"
> >
<foreignObject x="0" <foreignObject x="0"
@ -65,9 +67,11 @@ exports[`watermark should render image 1`] = `
width="100" width="100"
height="100" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="padding: 0px 0px 0px 0px; opacity: 0.5;" style="padding: 0px 0px 0px 0px; opacity: 0.5;"
> >
<image href="base64Url" <image href="base64Url"
xlink:href="base64Url"
x="0" x="0"
y="0" y="0"
width="100" width="100"
@ -89,6 +93,7 @@ exports[`watermark test false value fullPage 1`] = `
width="100" width="100"
height="100" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="padding: 0px 0px 0px 0px;" style="padding: 0px 0px 0px 0px;"
> >
<foreignObject x="0" <foreignObject x="0"
@ -116,6 +121,7 @@ exports[`watermark test width, height, rotate, zIndex 1`] = `
width="20" width="20"
height="20" height="20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="padding: 0px 0px 0px 0px;" style="padding: 0px 0px 0px 0px;"
> >
<foreignObject x="0" <foreignObject x="0"