fix rendering of the svg

src/page/HomePage.vue

@@ -258,23 +258,26 @@
     </div>
     <div
       ref="ogwrapper"
-      class="og-wrapper lg:pl-10"
+      class="og-wrapper pl-10"
     >
-      <svg data-marpit-svg :viewBox="[0, 0, width, height].join(' ')">
+      <div class="og-wrapper-content">
-        <foreignObject
+        <svg
-          :width="width"
+          :viewBox="[0, 0, width, height].join(' ')"
-          :height="height"
           :style="ogSvgStyle()"
+          :width="ogMaxWidth"
+          :height="ogMaxHeight"
         >
-          <div class="og-wrapper-content">
+          <foreignObject
+            :style="ogSvgFoStyle()"
+          >
             <div
               ref="og"
               class="og"
               :style="ogStyle()"
             >
               <div
+                ref="render"
                 class="og-image"
-                ref="ogimage"
                 :style="ogImageStyle()"
               >
                 <div
@@ -337,9 +340,9 @@
                 </div>
               </div>
             </div>
-          </div>
+          </foreignObject>
-        </foreignObject>
+        </svg>
-      </svg>
+      </div>
       <div class="text-center mt-3">
         <DownloadButton
           class="rounded-l-md"
@@ -518,23 +521,31 @@ export default {
   methods: {
     ogSvgStyle() {
       return {
-        maxHeight: `${this.ogMaxHeight}px`,
-        maxWidth: `${this.ogMaxWidth}px !important`,
         aspectRatio: `${this.width}/${this.height}`,
+        maxHeight: `${this.ogMaxHeight}px !important`,
+        maxWidth: '100%',
+      }
+    },
+    ogSvgFoStyle() {
+      return {
+        aspectRatio: `${this.width}/${this.height}`,
+        maxHeight: `${this.ogMaxHeight}px !important`,
+        width: `${this.width}px`,
+        height: `${this.height}px`,
       }
     },
     ogStyle() {
       return {
         color: this.textColor,
-        fontFamily: this.font,
-        maxHeight: `${this.ogMaxHeight}px`,
-        maxWidth: `${this.ogMaxWidth}px !important`,
         aspectRatio: `${this.width}/${this.height}`,
+        maxHeight: `${this.ogMaxHeight}px !important`,
+        width: `${this.width}px`,
+        height: `${this.height}px`,
       }
     },
     ogImageStyle() {
       let value = {
-        aspectRatio: `${this.width}/${this.height}`,
+        aspectRatio: `${this.width}/${this.height}`
       }
 
       if (this.background) {
@@ -599,9 +610,7 @@ export default {
 
       return {
         background,
-        aspectRatio: `${this.width}/${this.height}`,
+        aspectRatio: `${this.width}/${this.height}`
-        maxHeight: `${this.ogMaxHeight}px`,
-        maxWidth: `${this.ogMaxWidth}px`,
       }
     },
     ogContentStyle() {
@@ -622,7 +631,7 @@ export default {
       return this.download(toJpeg, 'image.jpg')
     },
     download(callback, filename) {
-      const element = this.$refs.ogimage
+      const element = this.$refs.render
 
       callback(element, {
         canvasWidth: this.width,
@@ -671,11 +680,21 @@ export default {
   width: calc(100vw - 540px);
 }
 
+.og-svg {
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.og-svg > foreignObject {
+  overflow: hidden;
+}
+
 .og-wrapper-content {
   background-color: #c1c1c1;
   background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
+  text-align: center;
 }
 
 .og-heading {