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

Jump to bottom

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 all 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
12 changes: 10 additions & 2 deletions 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 @@
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 not recommended value for transparency in SVG, please use 'rgba(r,g,b,0)' instead.`);

Check failure on line 20 in src/svg/helper.ts

View workflow job for this annotation

GitHub Actions / lint (18.x) 

This line has a length of 125. Maximum allowed is 120
}
}

let opacity;
if (!color || color === 'transparent') {
color = 'none';
Expand All @@ -29,7 +35,9 @@
}
return {
color,
opacity: opacity == null ? 1 : opacity
opacity: opacity == null
? color === 'none' ? 0 : 1
: opacity
};
}
const EPSILON = 1e-4;
Expand Down Expand Up @@ -189,4 +197,4 @@
}
return null;
};
})();
})();
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