Feat: Add transparent touch area around symbols

stephenhutchings · Mar 15, 2023 · 0a49a8b · 0a49a8b
1 parent b541317
commit 0a49a8b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/css/shown.css b/src/css/shown.css
@@ -3,6 +3,10 @@
   overflow: visible;
 }
 
+.shown defs {
+  display: none;
+}
+
 .shown svg,
 .shown text {
   fill: currentColor;
@@ -130,6 +134,11 @@
   font-size: 10px;
 }
 
+.shown .symbol .touch {
+  fill: transparent !important;
+  stroke: none !important;
+}
+
 .shown .symbol * {
   vector-effect: non-scaling-stroke;
 }
diff --git a/src/templates/symbol.js b/src/templates/symbol.js
@@ -43,7 +43,16 @@ const symbol = (type) => {
     class: "symbol",
     id: `symbol-${type}`,
     viewBox: "0 0 100 100",
-  })(symbol)
+  })([
+    $.rect({
+      class: "touch",
+      x: -150,
+      y: -150,
+      width: 300,
+      height: 300,
+    }),
+    symbol,
+  ])
 }
 
 export default (data) => {