From b5c8cbec526bab5b85b39f73d14c07d3d4a1ddcb Mon Sep 17 00:00:00 2001
From: Shawn <shawn@kafei.io>
Date: Sat, 1 Dec 2018 00:59:12 -0600
Subject: [PATCH] Attempt to fix Safari rendering of SVGs

---
 client/src/components/Memeify/FontFaces/OldBlue.js   | 4 ++--
 client/src/components/Memeify/FontFaces/VaporWave.js | 2 +-
 client/src/components/Memeify/RichDraggable/index.js | 2 +-
 client/src/components/Memeify/index.js               | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Memeify/FontFaces/OldBlue.js b/client/src/components/Memeify/FontFaces/OldBlue.js
index e316c2d9..84f584c2 100644
--- a/client/src/components/Memeify/FontFaces/OldBlue.js
+++ b/client/src/components/Memeify/FontFaces/OldBlue.js
@@ -25,12 +25,12 @@ module.exports = {
       <svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
 				<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
         <text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>
 				<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>
diff --git a/client/src/components/Memeify/FontFaces/VaporWave.js b/client/src/components/Memeify/FontFaces/VaporWave.js
index af8b0258..99d462ad 100644
--- a/client/src/components/Memeify/FontFaces/VaporWave.js
+++ b/client/src/components/Memeify/FontFaces/VaporWave.js
@@ -35,7 +35,7 @@ module.exports = {
       <svg viewBox="0 0 500 160" style={{ height: '10em' }}>
         <path id={id} fill="transparent" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
         <text x="10">
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {formattedText}
           </textPath>
         </text>
diff --git a/client/src/components/Memeify/RichDraggable/index.js b/client/src/components/Memeify/RichDraggable/index.js
index 8c7e8226..114ca50b 100644
--- a/client/src/components/Memeify/RichDraggable/index.js
+++ b/client/src/components/Memeify/RichDraggable/index.js
@@ -50,7 +50,7 @@ export default class RichDraggable extends Component {
     return (
       <Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
         <div ref={me.contents} style={{ border: '4px dashed rgba(0, 0, 0, .7)', cursor: 'move', position: 'absolute' }} className="creatifyDecor">
-          <div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }}>
+          <div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }} className="creatifyDecor">
             <div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
               {props.children}
             </div>
diff --git a/client/src/components/Memeify/index.js b/client/src/components/Memeify/index.js
index 73965c66..83bd5f93 100644
--- a/client/src/components/Memeify/index.js
+++ b/client/src/components/Memeify/index.js
@@ -30,7 +30,7 @@ const getRasterizedCanvas = (contents, width, height) => {
 
     // Attempt to match font kerning with the DOM.
     const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>';
-    const svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
+    let svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
 <foreignObject x="0" y="0" width="${width * 2}" height="${height * 2}" externalResourcesRequired="true">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
 </foreignObject></svg>`;