move vector-effect from CSS to SVG to maybe address Safari issue #64

fhstp · Dec 14, 2021 · e9920ee · e9920ee
1 parent ba22df7
commit e9920ee
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
@@ -58,8 +58,20 @@
       <line x1="105" y1="0" x2="-105" y2="0" />
     </g>
     <g id="coords-min" v-else>
-      <line x1="0" y1="-105" x2="0" y2="105" />
-      <line x1="105" y1="0" x2="-105" y2="0" />
+      <line
+        vector-effect="non-scaling-stroke"
+        x1="0"
+        y1="-102"
+        x2="0"
+        y2="102"
+      />
+      <line
+        vector-effect="non-scaling-stroke"
+        x1="102"
+        y1="0"
+        x2="-102"
+        y2="0"
+      />
     </g>
 
     <g id="sectors">
@@ -120,6 +132,7 @@
         <text
           v-if="alteriNames"
           class="textbg"
+          vector-effect="non-scaling-stroke"
           :x="mark.x"
           :y="mark.y"
           :text-anchor="mark.x < 0 ? 'end' : 'start'"
@@ -354,7 +367,6 @@ text {
 .textbg {
   stroke: white;
   stroke-width: 3;
-  vector-effect: non-scaling-stroke;
 }
 
 circle#horizon-base {
@@ -372,7 +384,6 @@ circle#horizon-overlay {
 #coords-min line {
   stroke: lightgray;
   stroke-width: 1;
-  vector-effect: non-scaling-stroke;
 }
 
 line {