Mercurial > gemma
changeset 3563:f65ef9148d00
client: improve waterlevel diagram
* Change SVG creation in the diagram to be more compatible with other
SVG viewers (as
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
recommends) by giving fill opacity values separately.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 31 May 2019 17:30:59 +0200 |
parents | c03224d33e78 |
children | f50bde7eed0d |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 8 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Fri May 31 17:24:48 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri May 31 17:30:59 2019 +0200 @@ -601,8 +601,12 @@ .attr("fill", "black"); this.svg .selectAll(".ref-waterlevel-label-background") - .attr("fill", "rgba(255, 255, 255, 0.6)"); - this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)"); + .attr("fill", "rgb(255, 255, 255)") + .attr("fill-opacity", 0.6); + this.svg + .selectAll(".hdc-ldc-area") + .attr("fill", "rgb(0, 255, 0)") + .attr("fill-opacity", 0.1); this.svg .selectAll(".now-line") .attr("stroke", "#999") @@ -626,7 +630,8 @@ .attr("clip-path", "url(#waterlevel-clip)"); this.svg .selectAll("path.nash-sutcliffe.ns72") - .attr("fill", "rgba(255, 255, 255, 0.5)"); + .attr("fill", "rgb(255, 255, 255)") + .attr("fill-opacity", 0.5); this.svg .selectAll("text.nash-sutcliffe") .style("font-size", "10px")