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")