LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Packages Projects Releases 4 Wiki Activity

Attempt to fix Safari rendering of SVGs

Browse source
This commit is contained in:
Shawn 2018-12-01 00:59:12 -06:00
parent 753935f284
commit b5c8cbec52
4 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Memeify/FontFaces/OldBlue.js
View file

@ -25,12 +25,12 @@ module.exports = {
<svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}> <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)" /> <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' }}> <text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
<textPath href={`#${id}`}> <textPath xlinkHref={`#${id}`}>
{text} {text}
</textPath> </textPath>
</text> </text>
<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}> <text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
<textPath href={`#${id}`}> <textPath xlinkHref={`#${id}`}>
{text} {text}
</textPath> </textPath>
</text> </text>

2
client/src/components/Memeify/FontFaces/VaporWave.js
View file

@ -35,7 +35,7 @@ module.exports = {
<svg viewBox="0 0 500 160" style={{ height: '10em' }}> <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" /> <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"> <text x="10">
<textPath href={`#${id}`}> <textPath xlinkHref={`#${id}`}>
{formattedText} {formattedText}
</textPath> </textPath>
</text> </text>

2
client/src/components/Memeify/RichDraggable/index.js
View file

@ -50,7 +50,7 @@ export default class RichDraggable extends Component {
return ( return (
<Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag"> <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 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' }}> <div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
{props.children} {props.children}
</div> </div>

2
client/src/components/Memeify/index.js
View file

@ -30,7 +30,7 @@ const getRasterizedCanvas = (contents, width, height) => {
// Attempt to match font kerning with the DOM. // Attempt to match font kerning with the DOM.
const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>'; 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"> <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> <html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
</foreignObject></svg>`; </foreignObject></svg>`;