fix: hatch mask disappears on Safari #64

change the id for the hatch mask in cross section, so it's different from the canvas hatch mask id. This works around an SVG issue an Safari.
TinyTapeout · Nov 16, 2024 · 5dba6b7 · 5dba6b7
1 parent 4823f4f
commit 5dba6b7
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/CrossSection.tsx b/src/components/CrossSection.tsx
@@ -56,16 +56,16 @@ export default function CrossSection() {
       >
         <defs>
           <pattern
-            id="hatch-pattern"
+            id="hatch-pattern-xs"
             patternUnits="userSpaceOnUse"
             width="20"
             height="20"
             patternTransform="rotate(-45 0 0)"
           >
             <line x1="0" y1="0" x2="0" y2="20" stroke="white" stroke-width="20" />
           </pattern>
-          <mask id="hatch-mask" x="0" y="0" width="1" height="1">
-            <rect x="0" y="0" width="1000" height="1000" fill="url(#hatch-pattern)" />
+          <mask id="hatch-mask-xs" x="0" y="0" width="1" height="1">
+            <rect x="0" y="0" width="1000" height="1000" fill="url(#hatch-pattern-xs)" />
           </mask>
           <mask id="poly-mask">
             <rect x="0" y="0" width="1000" height="1000" fill="white" />
@@ -100,7 +100,7 @@ export default function CrossSection() {
                   fill={layer.color}
                   mask={
                     layer.hatched
-                      ? 'url(#hatch-mask)'
+                      ? 'url(#hatch-mask-xs)'
                       : layer.masked
                       ? 'url(#poly-mask)'
                       : undefined