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(Empty): linearGradient id conflict (#8011)

Browse Source
This commit is contained in:
neverland 2021-01-26 19:04:55 +08:00 committed by GitHub
parent c4abadf7e2
commit 8d7f283293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/empty/Network.tsx
View File

@ -1,3 +1,5 @@
const prefix = 'van-empty-network-';
export default {
render() {
const genStop = (color: string, offset: number, opacity?: number) => (
@ -7,32 +9,58 @@ export default {
return (
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="c" x1="64.022%" y1="100%" x2="64.022%" y2="0%">
<linearGradient
id={`${prefix}1`}
x1="64.022%"
y1="100%"
x2="64.022%"
y2="0%"
>
{genStop('#FFF', 0, 0.5)}
{genStop('#F2F3F5', 100)}
</linearGradient>
<linearGradient id="d" x1="64.022%" y1="96.956%" x2="64.022%" y2="0%">
{genStop('#F2F3F5', 0, 0.3)}
{genStop('#F2F3F5', 100)}
</linearGradient>
<linearGradient id="h" x1="50%" y1="0%" x2="50%" y2="84.459%">
<linearGradient
id={`${prefix}2`}
x1="50%"
y1="0%"
x2="50%"
y2="84.459%"
>
{genStop('#EBEDF0', 0)}
{genStop('#DCDEE0', 100, 0)}
</linearGradient>
<linearGradient id="i" x1="100%" y1="0%" x2="100%" y2="100%">
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient id="k" x1="100%" y1="100%" x2="100%" y2="0%">
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient id="m" x1="0%" y1="43.982%" x2="100%" y2="54.703%">
<linearGradient
id={`${prefix}3`}
x1="100%"
y1="0%"
x2="100%"
y2="100%"
>
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient
id="n"
id={`${prefix}4`}
x1="100%"
y1="100%"
x2="100%"
y2="0%"
>
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient
id={`${prefix}5`}
x1="0%"
y1="43.982%"
x2="100%"
y2="54.703%"
>
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient
id={`${prefix}6`}
x1="94.535%"
y1="43.837%"
x2="5.465%"
@ -42,7 +70,7 @@ export default {
{genStop('#DCDEE0', 100)}
</linearGradient>
<radialGradient
id="g"
id={`${prefix}7`}
cx="50%"
cy="0%"
fx="50%"
@ -58,59 +86,49 @@ export default {
<g opacity=".8">
<path
d="M0 124V46h20v20h14v58H0z"
fill="url(#c)"
fill={`url(#${prefix}1)`}
transform="matrix(-1 0 0 1 36 7)"
/>
<path
d="M40.5 5a8.504 8.504 0 018.13 6.009l.12-.005L49 11a8 8 0 11-1 15.938V27H34v-.174a6.5 6.5 0 11-1.985-12.808A8.5 8.5 0 0140.5 5z"
fill="url(#d)"
transform="translate(2 7)"
/>
<path
d="M96.016 0a4.108 4.108 0 013.934 2.868l.179-.004c2.138 0 3.871 1.71 3.871 3.818 0 2.109-1.733 3.818-3.871 3.818-.164 0-.325-.01-.484-.03v.03h-6.774v-.083a3.196 3.196 0 01-.726.083C90.408 10.5 89 9.111 89 7.398c0-1.636 1.284-2.976 2.911-3.094a3.555 3.555 0 01-.008-.247c0-2.24 1.842-4.057 4.113-4.057z"
fill="url(#d)"
transform="translate(2 7)"
/>
<path
d="M121 8h22.231v14H152v77.37h-31V8z"
fill="url(#c)"
fill={`url(#${prefix}1)`}
transform="translate(2 7)"
/>
</g>
<path fill="url(#g)" d="M0 139h160v21H0z" />
<path fill={`url(#${prefix}7)`} d="M0 139h160v21H0z" />
<path
d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
fill="url(#h)"
fill={`url(#${prefix}2)`}
fill-rule="nonzero"
transform="translate(43 36)"
/>
<g opacity=".6" stroke-linecap="round" stroke-width="7">
<path
d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
stroke="url(#i)"
stroke={`url(#${prefix}3)`}
transform="translate(43 36)"
/>
<path
d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
stroke="url(#i)"
stroke={`url(#${prefix}3)`}
transform="translate(43 36)"
/>
<path
d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
stroke="url(#k)"
stroke={`url(#${prefix}4)`}
transform="rotate(-180 76.483 42.257)"
/>
<path
d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
stroke="url(#k)"
stroke={`url(#${prefix}4)`}
transform="rotate(-180 89.791 42.146)"
/>
</g>
<g transform="translate(31 105)" fill-rule="nonzero">
<rect fill="url(#m)" width="98" height="34" rx="2" />
<rect fill={`url(#${prefix}5)`} width="98" height="34" rx="2" />
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114" />
<rect
fill="url(#n)"
fill={`url(#${prefix}6)`}
x="15"
y="12"
width="18"

40
src/empty/test/__snapshots__/index.spec.js.snap
View File

@ -24,58 +24,52 @@ exports[`render svg when image is network 1`] = `
<div class="van-empty">
<div class="van-empty__image"><svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="c" x1="64.022%" y1="100%" x2="64.022%" y2="0%">
<linearGradient id="van-empty-network-1" x1="64.022%" y1="100%" x2="64.022%" y2="0%">
<stop stop-color="#FFF" offset="0%" stop-opacity="0.5"></stop>
<stop stop-color="#F2F3F5" offset="100%"></stop>
</linearGradient>
<linearGradient id="d" x1="64.022%" y1="96.956%" x2="64.022%" y2="0%">
<stop stop-color="#F2F3F5" offset="0%" stop-opacity="0.3"></stop>
<stop stop-color="#F2F3F5" offset="100%"></stop>
</linearGradient>
<linearGradient id="h" x1="50%" y1="0%" x2="50%" y2="84.459%">
<linearGradient id="van-empty-network-2" x1="50%" y1="0%" x2="50%" y2="84.459%">
<stop stop-color="#EBEDF0" offset="0%"></stop>
<stop stop-color="#DCDEE0" offset="100%" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="i" x1="100%" y1="0%" x2="100%" y2="100%">
<linearGradient id="van-empty-network-3" x1="100%" y1="0%" x2="100%" y2="100%">
<stop stop-color="#EAEDF0" offset="0%"></stop>
<stop stop-color="#DCDEE0" offset="100%"></stop>
</linearGradient>
<linearGradient id="k" x1="100%" y1="100%" x2="100%" y2="0%">
<linearGradient id="van-empty-network-4" x1="100%" y1="100%" x2="100%" y2="0%">
<stop stop-color="#EAEDF0" offset="0%"></stop>
<stop stop-color="#DCDEE0" offset="100%"></stop>
</linearGradient>
<linearGradient id="m" x1="0%" y1="43.982%" x2="100%" y2="54.703%">
<linearGradient id="van-empty-network-5" x1="0%" y1="43.982%" x2="100%" y2="54.703%">
<stop stop-color="#EAEDF0" offset="0%"></stop>
<stop stop-color="#DCDEE0" offset="100%"></stop>
</linearGradient>
<linearGradient id="n" x1="94.535%" y1="43.837%" x2="5.465%" y2="54.948%">
<linearGradient id="van-empty-network-6" x1="94.535%" y1="43.837%" x2="5.465%" y2="54.948%">
<stop stop-color="#EAEDF0" offset="0%"></stop>
<stop stop-color="#DCDEE0" offset="100%"></stop>
</linearGradient>
<radialGradient id="g" cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="matrix(0 1 -.54835 0 .5 -.5)">
<radialGradient id="van-empty-network-7" cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="matrix(0 1 -.54835 0 .5 -.5)">
<stop stop-color="#EBEDF0" offset="0%"></stop>
<stop stop-color="#FFF" offset="100%" stop-opacity="0"></stop>
</radialGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g opacity=".8">
<path d="M0 124V46h20v20h14v58H0z" fill="url(#c)" transform="matrix(-1 0 0 1 36 7)"></path>
<path d="M40.5 5a8.504 8.504 0 018.13 6.009l.12-.005L49 11a8 8 0 11-1 15.938V27H34v-.174a6.5 6.5 0 11-1.985-12.808A8.5 8.5 0 0140.5 5z" fill="url(#d)" transform="translate(2 7)"></path>
<path d="M96.016 0a4.108 4.108 0 013.934 2.868l.179-.004c2.138 0 3.871 1.71 3.871 3.818 0 2.109-1.733 3.818-3.871 3.818-.164 0-.325-.01-.484-.03v.03h-6.774v-.083a3.196 3.196 0 01-.726.083C90.408 10.5 89 9.111 89 7.398c0-1.636 1.284-2.976 2.911-3.094a3.555 3.555 0 01-.008-.247c0-2.24 1.842-4.057 4.113-4.057z" fill="url(#d)" transform="translate(2 7)"></path>
<path d="M121 8h22.231v14H152v77.37h-31V8z" fill="url(#c)" transform="translate(2 7)"></path>
<path d="M0 124V46h20v20h14v58H0z" fill="url(#van-empty-network-1)" transform="matrix(-1 0 0 1 36 7)"></path>
<path d="M121 8h22.231v14H152v77.37h-31V8z" fill="url(#van-empty-network-1)" transform="translate(2 7)"></path>
</g>
<path fill="url(#g)" d="M0 139h160v21H0z"></path>
<path d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z" fill="url(#h)" fill-rule="nonzero" transform="translate(43 36)"></path>
<path fill="url(#van-empty-network-7)" d="M0 139h160v21H0z"></path>
<path d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z" fill="url(#van-empty-network-2)" fill-rule="nonzero" transform="translate(43 36)"></path>
<g opacity=".6" stroke-linecap="round" stroke-width="7">
<path d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#i)" transform="translate(43 36)"></path>
<path d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145" stroke="url(#i)" transform="translate(43 36)"></path>
<path d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#k)" transform="rotate(-180 76.483 42.257)"></path>
<path d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145" stroke="url(#k)" transform="rotate(-180 89.791 42.146)"></path>
<path d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#van-empty-network-3)" transform="translate(43 36)"></path>
<path d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145" stroke="url(#van-empty-network-3)" transform="translate(43 36)"></path>
<path d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#van-empty-network-4)" transform="rotate(-180 76.483 42.257)"></path>
<path d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145" stroke="url(#van-empty-network-4)" transform="rotate(-180 89.791 42.146)"></path>
</g>
<g transform="translate(31 105)" fill-rule="nonzero">
<rect fill="url(#m)" width="98" height="34" rx="2"></rect>
<rect fill="url(#van-empty-network-5)" width="98" height="34" rx="2"></rect>
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114"></rect>
<rect fill="url(#n)" x="15" y="12" width="18" height="6" rx="1.114"></rect>
<rect fill="url(#van-empty-network-6)" x="15" y="12" width="18" height="6" rx="1.114"></rect>
</g>
</g>
</svg></div>