url fix because of Safari svg parsing

projects/avatar/src/lib/parts/avatar.ts

@@ -52,7 +52,7 @@ export class AvatarHelper {
   />
   <g
     id="Color/Palette/Blue-01"
-  mask="url(#mask-2)"
+  mask="url(${window.location.href}#mask-2)"
   fill="#65C9FF">
   <rect id="pen-Color" x="0" y="0" width="240" height="240" />
     </g>
@@ -65,7 +65,7 @@ export class AvatarHelper {
     id="Avataaar"
   stroke-width="1"
   fill-rule="evenodd"
-  mask="url(#mask-4)">
+  mask="url(${window.location.href}#mask-4)">
   <g id="Body" transform="translate(32.000000, 36.000000)">
   <mask id="mask-6" fill="white">
   <use href="#path-5" />
@@ -76,7 +76,7 @@ export class AvatarHelper {
   id="Neck-Shadow"
   fill-opacity="0.100000001"
   fill="#000000"
-  mask="url(#mask-6)"
+  mask="url(${window.location.href}#mask-6)"
     /></g>
  ${ClothesHelper.getClothesSvg(options.clothes, options.clothColor, options.graphic)}
   ${FaceHelper.getFaceSvg(options.mouth, options.eyes, options.eyebrow)}

projects/avatar/src/lib/parts/clothes.ts

@@ -44,15 +44,15 @@ export class ClothesHelper {
     <use href="#path1" />
       </mask>
       <use id="Clothes" fill="#E6E6E6" href="#cloth_path" />
-    <g id="Color/Palette/Black" mask="url(#cloth_mask)" fill="#262E33">
+    <g id="Color/Palette/Black" mask="url(${window.location.href}#cloth_mask)" fill="#262E33">
     <g transform="translate(-32.000000, -29.000000)" id="pen-Color">
     <rect x="0" y="0" width="264" height="110" />
       </g>
       </g>
       <g
     id="Shadowy"
     opacity="0.599999964"
-    mask="url(#cloth_mask)"
+    mask="url(${window.location.href}#cloth_mask)"
     fill-opacity="0.16"
     fill="#000000">
     <g transform="translate(60.000000, -25.000000)" id="Hola">
@@ -113,7 +113,7 @@ export class ClothesHelper {
     />
     <g
       id='Color/Palette/Black'
-    mask='url(#blazer_mask)'
+    mask='url(${window.location.href}#blazer_mask)'
     fill-rule='evenodd'
     fill='#262E33'>
     <rect id='pen-Color' x='0' y='0' width='264' height='110' />
@@ -226,15 +226,15 @@ export class ClothesHelper {
           id='Straps'
           fill='#F4F4F4'
           fill-rule='evenodd'
-          mask='url(#hoodie_mask)'
+          mask='url(${window.location.href}#hoodie_mask)'
         />
         <path
           d='M90.9601329,12.7243537 C75.9093095,15.5711782 65.5,21.2428847 65.5,32.3076923 C65.5,52.0200095 98.5376807,68 132,68 C165.462319,68 198.5,52.0200095 198.5,32.3076923 C198.5,21.2428847 188.09069,15.5711782 173.039867,12.7243537 C182.124921,16.0744598 188,21.7060546 188,31.0769231 C188,51.4689754 160.178795,68 132,68 C103.821205,68 76,51.4689754 76,31.0769231 C76,21.7060546 81.8750795,16.0744598 90.9601329,12.7243537 Z'
           id='Shadow'
           fill-opacity='0.16'
           fill='#000000'
           fill-rule='evenodd'
-          mask='url(#hoodie_mask)'
+          mask='url(${window.location.href}#hoodie_mask)'
         />
       </g>`;
   }
@@ -299,7 +299,7 @@ export class ClothesHelper {
           opacity='0.599999964'
           stroke-width='1'
           fill-rule='evenodd'
-          mask='url(#crew_path)'
+          mask='url(${window.location.href}#crew_path)'
           fill-opacity='0.16'
           fill='#000000'>
           <g transform='translate(92.000000, 4.000000)' id='Hola'>
@@ -362,7 +362,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Bat'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     fill-rule='evenodd'
     fill='#FFFFFF'>
     <g transform='translate(77.000000, 58.000000)' id='Batman!'>
@@ -373,7 +373,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Cumbia'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Group'>
@@ -430,7 +430,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Deer'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     fill-rule='evenodd'
     fill='#FFFFFF'>
     <g transform='translate(77.000000, 58.000000)' id='oh,-deer!'>
@@ -441,7 +441,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Diamond'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Diamond'>
@@ -473,7 +473,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Hola'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     fill-rule='evenodd'
     fill='#FFFFFF'>
     <g transform='translate(77.000000, 58.000000)' id='Hola'>
@@ -484,7 +484,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Pizza'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Group-2'>
@@ -511,7 +511,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Resist'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Resist'>
@@ -563,7 +563,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Selena'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Selena'>
@@ -590,7 +590,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Bear'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <defs>
@@ -608,7 +608,7 @@ export class ClothesHelper {
     d='M34.4465814,31.5861741 C33.968066,34.4016565 30.3675711,38.9307388 27.2995299,35.97048 C23.8326433,32.6262918 31.5245196,31.1602447 28.7810969,28.3763859 C27.5974268,27.1761741 24.3685608,27.83928 22.7791175,27.96528 C21.289633,28.0833741 18.9133856,28.4198682 19.4834474,30.5900329 C19.9159423,32.2398918 21.1926433,31.5342918 21.8715711,32.4815153 C22.4069938,33.2301035 22.1798598,35.9887624 21.3826639,36.7492094 C20.3796124,37.7053271 19.193468,37.4123153 17.7975093,36.7996094 C14.6057567,35.39928 13.1212206,31.4868565 15.2228289,28.5829271 C19.3780454,22.8417741 35.2897979,21.5244565 34.4465814,31.5861741 M14.9853031,14.7244094 C15.9695505,14.2811859 17.132932,14.5213271 17.7173443,15.5110447 C18.5189938,16.8669035 17.3595711,18.6842682 15.7424165,18.4668565 C14.0347052,18.2365976 13.1726845,15.5481035 14.9853031,14.7244094 M32.9472,16.3787153 C32.0911175,19.3854212 27.3109113,16.0012094 30.0112825,14.08848 C31.5626227,12.9900565 33.4583753,14.5801271 32.9472,16.3787153 M47.8267052,23.16888 C47.5911588,20.7887153 46.9270763,18.5231859 45.7389526,16.4385035 C45.1164371,15.3460094 44.3464577,14.3276329 43.5492619,13.35768 C43.2483959,12.9930212 42.6432,12.34968 42.5264165,12.1446212 C41.8173031,10.90488 41.888066,11.7834212 42.2789938,10.3598682 C42.8950763,8.11657412 44.2262103,6.28043294 43.1627876,3.87062118 C42.1735918,1.62930353 39.5078598,0.576832941 37.1791175,0.443915294 C36.0914474,0.382150588 35.0017979,0.525938824 33.9720247,0.892574118 C32.9368082,1.26069176 31.9708701,2.53255059 31.0717361,2.79393882 C30.3740041,2.99702118 28.3872,2.33391529 27.6305814,2.28549176 C26.2356124,2.19605647 24.8332206,2.23558588 23.4387464,2.31859765 C21.8087258,2.41544471 18.0632412,3.58205647 16.5257567,3.19565647 C15.5108289,2.94069176 14.3172619,1.41485647 13.1449732,1.03191529 C11.852932,0.610432941 10.4673649,0.467632941 9.17829278,0.954338824 C6.89260206,1.81805647 5.17845773,4.50605647 5.12501443,6.89560941 C5.09680825,8.15066824 5.78018969,9.01092706 5.91528247,10.1469035 C6.11816907,11.8619859 6.35223093,10.5026682 5.42835464,11.8718682 C4.9577567,12.5690682 4.13284948,13.1822682 3.60385979,13.8537741 C0.778787629,17.4405741 -0.278696907,22.73208 0.974746392,27.0733976 C4.13284948,38.0131624 14.6423753,42.4676329 25.4136742,41.86728 C34.6648082,41.3509271 48.9782103,34.1491624 47.8267052,23.16888'
     id='Fill-74'
     fill='#FFFFFF'
-    mask='url(#bear_mask)'
+    mask='url(${window.location.href}#bear_mask)'
       />
       </g>
       </g>
@@ -617,7 +617,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Skull-Outline'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     stroke-width='1'
     fill-rule='evenodd'>
     <g transform='translate(77.000000, 58.000000)' id='Skull'>
@@ -649,7 +649,7 @@ export class ClothesHelper {
         return `
     <g
     id='Clothing/Graphic/Skull'
-    mask='url(#${maskId})'
+    mask='url(${window.location.href}#${maskId})'
     fill-rule='evenodd'
     fill='#FFFFFF'>
     <g transform='translate(77.000000, 58.000000)' id='Fill-49'>

projects/avatar/src/lib/parts/colors.ts

@@ -4,7 +4,7 @@ export class ColorHelper {
   private static makeColor(hex: string, maskId: string) {
     return `<g
   id='Color/Palette/Gray-01'
-  mask='url(#${maskId})'
+  mask='url(${window.location.href}#${maskId})'
   fill-rule='evenodd'
   fill='${hex}'>
   <rect id='pen-Color' x='0' y='0' width='264' height='110' />

projects/avatar/src/lib/parts/face.ts

@@ -187,7 +187,7 @@ export class FaceHelper {
     <circle
       fill-opacity='0.699999988'
     fill='#000000'
-    mask='url(#squint_mask)'
+    mask='url(${window.location.href}#squint_mask)'
     cx='14'
     cy='10'
     r='6'
@@ -201,7 +201,7 @@ export class FaceHelper {
     <circle
       fill-opacity='0.699999988'
     fill='#000000'
-    mask='url(#squint_mask2)'
+    mask='url(${window.location.href}#squint_mask2)'
     cx='14'
     cy='10'
     r='6'
@@ -489,7 +489,7 @@ export class FaceHelper {
       id="Teeth"
     fill="#FFFFFF"
     fill-rule="evenodd"
-    mask="url(#mouth_mask)"
+    mask="url(${window.location.href}#mouth_mask)"
     x="39"
     y="2"
     width="31"
@@ -500,7 +500,7 @@ export class FaceHelper {
       id="Tongue"
     stroke-width="1"
     fill-rule="evenodd"
-    mask="url(#mouth_mask)"
+    mask="url(${window.location.href}#mouth_mask)"
     fill="#FF4F6D">
     <g transform="translate(38.000000, 24.000000)">
     <circle id="friend?" cx="11" cy="11" r="11" />
@@ -595,7 +595,7 @@ export class FaceHelper {
     id='Grimace-Teeth'
     fill='#E6E6E6'
     fill-rule='evenodd'
-    mask='url(#grimace_mask)'
+    mask='url(${window.location.href}#grimace_mask)'
       />
       </g>`;
       case Mouth.SAD:
@@ -638,7 +638,7 @@ export class FaceHelper {
       id='Teeth'
     fill='#FFFFFF'
     fill-rule='evenodd'
-    mask='url(#scream_mask)'
+    mask='url(${window.location.href}#scream_mask)'
     x='39'
     y='2'
     width='31'
@@ -649,7 +649,7 @@ export class FaceHelper {
       id='Tongue'
     stroke-width='1'
     fill-rule='evenodd'
-    mask='url(#scream_mask)'
+    mask='url(${window.location.href}#scream_mask)'
     fill='#FF4F6D'>
     <g transform='translate(38.000000, 32.000000)' id='Say-ahhhh'>
     <circle cx='11' cy='11' r='11' />
@@ -689,7 +689,7 @@ export class FaceHelper {
       id='Teeth'
     fill='#FFFFFF'
     fill-rule='evenodd'
-    mask='url(#smile_mask)'
+    mask='url(${window.location.href}#smile_mask)'
     x='39'
     y='2'
     width='31'
@@ -700,7 +700,7 @@ export class FaceHelper {
       id='Tongue'
     stroke-width='1'
     fill-rule='evenodd'
-    mask='url(#smile_mask)'
+    mask='url(${window.location.href}#smile_mask)'
     fill='#FF4F6D'>
     <g transform='translate(38.000000, 24.000000)'>
     <circle cx='11' cy='11' r='11' />
@@ -731,7 +731,7 @@ export class FaceHelper {
       id='Teeth'
     fill='#FFFFFF'
     fill-rule='evenodd'
-    mask='url(#tongue_mask)'
+    mask='url(${window.location.href}#tongue_mask)'
     x='39'
     y='2'
     width='31'
@@ -816,7 +816,7 @@ export class FaceHelper {
       id='Teeth'
     fill='#FFFFFF'
     fill-rule='evenodd'
-    mask='url(#vomit_mask)'
+    mask='url(${window.location.href}#vomit_mask)'
     x='39'
     y='0'
     width='31'
@@ -828,7 +828,7 @@ export class FaceHelper {
     <use
       fill='black'
     fill-opacity='1'
-    filter='url(#vomit_filter)'
+    filter='url(${window.location.href}#vomit_filter)'
     href='#vomit_path2'
       />
       </g>