Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(svg): parse opacity of empty/'none'/'transparent' color as 0 and add warning for development environment #1092

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(svg): parse opacity of empty/'none'/'transparent' color as 0 and add warning for development environment #1092

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df3b3f3
fix(svg): parse opacity of empty/'none'/'transparent' color as 0 and …
plainheart Aug 2, 2024
f4ad697
test(svg): update test case
plainheart Aug 2, 2024
930de26
chore(svg): tweak warnning wording for unrecommended transparency value
plainheart Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/svg/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import env from '../core/env';
const mathRound = Math.round;

export function normalizeColor(color: string): { color: string; opacity: number; } {
if (process.env.NODE_ENV !== 'production') {
if (!color || color === 'none' || color === 'transparent') {
console.warn(`'${color}' is an illegal value for transparency in SVG, please use 'rgba(r,g,b,0)' instead.`);
}
}

let opacity;
if (!color || color === 'transparent') {
color = 'none';
Expand All @@ -29,7 +35,9 @@ export function normalizeColor(color: string): { color: string; opacity: number;
}
return {
color,
opacity: opacity == null ? 1 : opacity
opacity: opacity == null
? color === 'none' ? 0 : 1
: opacity
};
}
const EPSILON = 1e-4;
Expand Down
89 changes: 89 additions & 0 deletions test/svg-gradient.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG Gradient</title>
<script src="./lib/config.js"></script>
<script src="../dist/zrender.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="main-svg" style="display: inline-block;"></div>
<div id="main-canvas" style="display: inline-block;"></div>

<script type="text/javascript">
var zrSVG = zrender.init(document.getElementById('main-svg'), {
renderer: 'svg',
width: 200,
height: 200
});

var zrCanvas = zrender.init(document.getElementById('main-canvas'), {
renderer: 'canvas',
width: 200,
height: 200
});

render(zrSVG)
render(zrCanvas)

function render(zr) {
zr.setBackgroundColor('navajowhite');

var linearGradient1 = new zrender.LinearGradient(0, 0, 0, 1);
linearGradient1.addColorStop(0, 'transparent');
linearGradient1.addColorStop(1, 'orange');

var linearGradient2 = new zrender.LinearGradient(0, 0, 0, 1);
linearGradient2.addColorStop(0, 'none');
linearGradient2.addColorStop(1, 'orange');

var linearGradient3 = new zrender.LinearGradient(0, 0, 0, 1);
linearGradient3.addColorStop(0, '');
linearGradient3.addColorStop(1, 'orange');

zr.add(
new zrender.Rect({
shape: {
x: 20,
y: 50,
width: 20,
height: 100,
},
style: {
fill: linearGradient1
}
})
);

zr.add(
new zrender.Rect({
shape: {
x: 60,
y: 50,
width: 20,
height: 100,
},
style: {
fill: linearGradient2
}
})
);

zr.add(
new zrender.Rect({
shape: {
x: 100,
y: 50,
width: 20,
height: 100,
},
style: {
fill: linearGradient3
}
})
);
}
</script>
</body>
</html>
Loading