fix: fixed vertical alignment in Firefix browsers (#135)

rastuhacode · cursoragent · web-flow · commit 43d14e4b9b16 · 2026-06-13T18:25:04.000+09:00
* fix: use dominant-baseline instead of alignment-baseline for SVG text

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;

* fix: sync venom.svg with actual one

---------

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/__test__/__snapshots__/model.test.ts.snap b/__test__/__snapshots__/model.test.ts.snap
@@ -184,8 +184,8 @@ exports[`Test Models blur model 1`] = `
     
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -198,8 +198,8 @@ exports[`Test Models blur model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -276,8 +276,8 @@ exports[`Test Models cylinder model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -290,8 +290,8 @@ exports[`Test Models cylinder model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -368,8 +368,8 @@ exports[`Test Models egg model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -382,8 +382,8 @@ exports[`Test Models egg model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -460,8 +460,8 @@ exports[`Test Models rect model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -474,8 +474,8 @@ exports[`Test Models rect model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -552,8 +552,8 @@ exports[`Test Models rounded model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -566,8 +566,8 @@ exports[`Test Models rounded model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -644,8 +644,8 @@ exports[`Test Models shark model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -658,8 +658,8 @@ exports[`Test Models shark model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -736,8 +736,8 @@ exports[`Test Models slice model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -750,8 +750,8 @@ exports[`Test Models slice model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -831,8 +831,8 @@ exports[`Test Models soft model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -845,8 +845,8 @@ exports[`Test Models soft model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -923,8 +923,8 @@ exports[`Test Models speech model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -937,8 +937,8 @@ exports[`Test Models speech model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -1034,8 +1034,8 @@ exports[`Test Models transparent model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -1048,8 +1048,8 @@ exports[`Test Models transparent model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -1141,8 +1141,8 @@ exports[`Test Models venom model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -1155,8 +1155,8 @@ exports[`Test Models venom model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -1233,8 +1233,8 @@ exports[`Test Models wave model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -1247,8 +1247,8 @@ exports[`Test Models wave model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
@@ -1372,8 +1372,8 @@ exports[`Test Models waving model 1`] = `
   
          
   <text
-    alignment-baseline="middle"
     class="text"
+    dominant-baseline="middle"
     stroke="#none"
     stroke-width="1"
     style="fill:#f7f5f5;"
@@ -1386,8 +1386,8 @@ exports[`Test Models waving model 1`] = `
   
         
   <text
-    alignment-baseline="middle"
     class="desc"
+    dominant-baseline="middle"
     style="fill:#f7f5f5;"
     text-anchor="middle"
     x="40%"
diff --git a/docs/samples/blur.svg b/docs/samples/blur.svg
@@ -55,7 +55,7 @@
     </circle>
 
 
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="text"
         style="fill:#f7f5f5;" stroke="#E0E0E0" stroke-width="2">Blur</text>
 
 </svg>
diff --git a/docs/samples/cylinder.svg b/docs/samples/cylinder.svg
@@ -15,8 +15,8 @@
         <path fill="#F4BBBB" fill-opacity="1"
             d="M 61 0 L 779 0 A 50 50 0 1 1 779 150 L 75 150 A 50 50 0 1 1 75 0 " />
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="45%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="45%" class="text"
         style="fill:#f7f5f5;" stroke="#none" stroke-width="1">Cylinder</text>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="70%" class="desc"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="70%" class="desc"
         style="fill:#f7f5f5;">desc is also animated</text>
 </svg>
diff --git a/docs/samples/rect.svg b/docs/samples/rect.svg
@@ -22,8 +22,8 @@
 
     <rect fill="#282829" height="70" width="160" x="30%" y="50%" transform="translate(-80, -35)"
         rx="25" ry="25" />
-    <text text-anchor="middle" alignment-baseline="middle" x="30%" y="50%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="30%" y="50%" class="text"
         style="fill:#f7f5f5;" stroke="#none" stroke-width="1"> RECT </text>
-    <text text-anchor="middle" alignment-baseline="middle" x="60%" y="50%" class="desc"
+    <text text-anchor="middle" dominant-baseline="middle" x="60%" y="50%" class="desc"
         style="fill:#f7f5f5;">Use 'textBg' to highlight 'text'</text>
 </svg>
diff --git a/docs/samples/rounded.svg b/docs/samples/rounded.svg
@@ -15,7 +15,7 @@
         <path fill="#F7EFE9" fill-opacity="1"
             d="M 61 0 L 793 0 Q 854 0 854 61 L 854 139 Q 854 200 793 200 L 61 200 Q 0 200 0 139 L 0 61 Q 0 0 61 0 z" />
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="text"
         style="fill:#363636;" stroke="#000000" stroke-width="2">Rounded with stroke</text>
 
 </svg>
diff --git a/docs/samples/slice.svg b/docs/samples/slice.svg
@@ -14,8 +14,8 @@
 
         <path fill="#75BDE0" fill-opacity="1" d="m 0 0 l 854 200 l 0 -200 l -854 0 z" />
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="70%" y="25%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="70%" y="25%" class="text"
         style="fill:#363636;" stroke="#none" stroke-width="1">SLICE</text>
-    <text text-anchor="middle" alignment-baseline="middle" x="60%" y="44%" class="desc"
+    <text text-anchor="middle" dominant-baseline="middle" x="60%" y="44%" class="desc"
         style="fill:#363636;">desc function is also rotated.</text>
 </svg>
diff --git a/docs/samples/soft.svg b/docs/samples/soft.svg
@@ -16,7 +16,7 @@
         <rect xmlns="http://www.w3.org/2000/svg" rx="4.5" height="120" width="100%" fill="#76819C"
             stroke-opacity="1" />
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="text"
         style="fill:#363636;" stroke="#none" stroke-width="1">Good to use with other readme</text>
 
 </svg>
diff --git a/docs/samples/speech.svg b/docs/samples/speech.svg
@@ -20,7 +20,7 @@
         <path fill="url(#linear)" fill-opacity="1"
             d="M 30 0 H 824 C 839 0, 854 15, 854 30 V 130 C 854 145, 839 160, 824 160 H 794 L 754 200 L 714 160 H 30 C 15 160, 0 145, 0 130 V 30 C 0 15, 15 0, 30 0 Z" />
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="35%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="35%" class="text"
         style="fill:#f7f5f5;" stroke="#none" stroke-width="1">
         <tspan x="30%" dy="0">speech</tspan>
         <tspan x="60%" dy="20%">bubble</tspan>
diff --git a/docs/samples/transparent.svg b/docs/samples/transparent.svg
@@ -14,8 +14,8 @@
 
 
     </svg>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%" class="text"
+    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="text"
         style="fill:#703ee5;" stroke="#none" stroke-width="1">Transparent</text>
-    <text text-anchor="middle" alignment-baseline="middle" x="60%" y="75%" class="desc"
+    <text text-anchor="middle" dominant-baseline="middle" x="60%" y="75%" class="desc"
         style="fill:#703ee5;">Only Use Text</text>
 </svg>
diff --git a/docs/samples/venom.svg b/docs/samples/venom.svg
@@ -1,31 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="854"
-    height="200" style="z-index:1;position:relative" viewBox="0 0 854 200">
-    <script xmlns="" />
-    <script xmlns="" />
-    <style>
-        .text { font-size: 70px; font-weight: 700; font-family:
-        -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe
-        UI Emoji; } .desc { font-size: 20px; font-weight: 500; font-family:
-        -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe
-        UI Emoji; }
-        .text, .desc { animation: fadeIn 1.2s ease-in-out forwards; } @keyframes fadeIn { from {
-        opacity: 0; } to { opacity: 1; } }
-    </style>
-    <defs>
-        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stop-color="#8871e5" />
-            <stop offset="100%" stop-color="#b678c4" />
-        </linearGradient>
-    </defs>
-
-    <g transform="translate(427, 100)">
-        <path id="myPath" fill="url(#linear)"
-            d="M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z">
-            <animate attributeName="d" dur="10s"
-                values="             M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z; M42.3,-55.2C55.2,-48.7,66.6,-37,69.3,-23.7C72,-10.4,66,4.6,58.3,16.1C50.6,27.6,41.2,35.6,31.1,43.9C21.1,52.1,10.6,60.6,-1.3,62.5C-13.2,64.3,-26.4,59.4,-37.6,51.5C-48.8,43.6,-57.9,32.7,-61,20.5C-64.1,8.3,-61.1,-5.3,-57.9,-19.9C-54.7,-34.6,-51.3,-50.3,-41.6,-57.8C-32,-65.3,-16,-64.7,-0.7,-63.7C14.6,-62.8,29.3,-61.6,42.3,-55.2Z; M49.2,-63.6C62.2,-58.3,70.1,-41.8,74.6,-24.9C79.1,-8.1,80.3,9.2,76.5,26.2C72.8,43.2,64.2,59.9,50.7,68.4C37.1,76.9,18.5,77.2,2.3,74.1C-13.9,70.9,-27.9,64.2,-41.2,55.6C-54.6,47.1,-67.4,36.6,-74.5,22.4C-81.7,8.2,-83.2,-9.7,-74.7,-20.8C-66.3,-31.9,-47.9,-36.3,-33.8,-41.2C-19.7,-46.2,-9.8,-51.8,4.1,-57.5C18.1,-63.1,36.2,-68.9,49.2,-63.6Z;             M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z"
-                repeatCount="indefinite" />
-        </path>
-    </g>
-    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%" class="text"
-        style="fill:#000000;" stroke="#b678c4" stroke-width="1">I am Venom.</text>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="854" height="200" style="z-index:1;position:relative" viewBox="0 0 854 200">
+<style>
+   .text {   font-size: 70px;   font-weight: 700;   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;  } .desc {   font-size: 20px;   font-weight: 500;   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;  } 
+   .text, .desc {   animation: fadeIn 1.2s ease-in-out forwards;  } @keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   }  } 
+</style>
+<defs>
+   <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#8871e5"/>
+      <stop offset="100%" stop-color="#b678c4"/>
+   </linearGradient>
+</defs>
+<g transform="translate(427, 100)">
+   <path id="myPath" fill="url(#linear)" d="M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z">
+      <animate attributeName="d" dur="10s" values="             M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z; M42.3,-55.2C55.2,-48.7,66.6,-37,69.3,-23.7C72,-10.4,66,4.6,58.3,16.1C50.6,27.6,41.2,35.6,31.1,43.9C21.1,52.1,10.6,60.6,-1.3,62.5C-13.2,64.3,-26.4,59.4,-37.6,51.5C-48.8,43.6,-57.9,32.7,-61,20.5C-64.1,8.3,-61.1,-5.3,-57.9,-19.9C-54.7,-34.6,-51.3,-50.3,-41.6,-57.8C-32,-65.3,-16,-64.7,-0.7,-63.7C14.6,-62.8,29.3,-61.6,42.3,-55.2Z; M49.2,-63.6C62.2,-58.3,70.1,-41.8,74.6,-24.9C79.1,-8.1,80.3,9.2,76.5,26.2C72.8,43.2,64.2,59.9,50.7,68.4C37.1,76.9,18.5,77.2,2.3,74.1C-13.9,70.9,-27.9,64.2,-41.2,55.6C-54.6,47.1,-67.4,36.6,-74.5,22.4C-81.7,8.2,-83.2,-9.7,-74.7,-20.8C-66.3,-31.9,-47.9,-36.3,-33.8,-41.2C-19.7,-46.2,-9.8,-51.8,4.1,-57.5C18.1,-63.1,36.2,-68.9,49.2,-63.6Z;             M52.8,-67C68,-61.6,79.7,-45.6,82.5,-28.7C85.4,-11.8,79.5,6,71.4,20.8C63.2,35.5,53,47.1,40.7,53.3C28.5,59.4,14.2,60,-2.1,63C-18.5,65.9,-37,71.2,-52.3,66C-67.6,60.9,-79.7,45.4,-81.5,29C-83.2,12.7,-74.6,-4.4,-68.7,-22.2C-62.8,-40.1,-59.5,-58.7,-48.4,-65.4C-37.4,-72.2,-18.7,-67.1,0,-67.1C18.8,-67.2,37.6,-72.4,52.8,-67Z" repeatCount="indefinite"/>
+   </path>
+</g>
+<text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%" class="text" style="fill:#000000;paint-order:stroke fill;" stroke="#b678c4" stroke-width="1">I am Venom.</text>
+<script xmlns=""/>
 </svg>
diff --git a/docs/samples/wave.svg b/docs/samples/wave.svg
diff --git a/docs/samples/waving.svg b/docs/samples/waving.svg
diff --git a/utils/render.ts b/utils/render.ts
