fix: fixes issues with iOS (#22)

* Fixes #14

* Update README.md

* Update README.md

Author: MLDMoritz

README.md

@@ -91,6 +91,10 @@ You can also use the [online tool](https://create-vue-content-loader.netlify.com
 |secondaryColor|string|`'#ecebeb'`||
 |uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
 |animate|boolean|`true`||
+|baseUrl|string|empty string|Required if you're using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <content-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14).|
+|primaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
+|secondaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
+
 
 ## Credits
 

src/ContentLoader.js

@@ -22,6 +22,10 @@ export default {
       type: String,
       default: 'xMidYMid meet'
     },
+    baseUrl: {
+      type: String,
+      default: ''
+    },
     primaryColor: {
       type: String,
       default: '#f9f9f9'
@@ -30,6 +34,14 @@ export default {
       type: String,
       default: '#ecebeb'
     },
+    primaryOpacity: {
+      type: Number,
+      default: 1
+    },
+    secondaryOpacity: {
+      type: Number,
+      default: 1
+    },
     uniqueKey: {
       type: String
     },
@@ -51,8 +63,8 @@ export default {
         preserveAspectRatio={props.preserveAspectRatio}
       >
         <rect
-          style={{ fill: `url(#${idGradient})` }}
-          clip-path={`url(#${idClip})`}
+          style={{ fill: `url(${props.baseUrl}#${idGradient})` }}
+          clip-path={`url(${props.baseUrl}#${idClip})`}
           x="0"
           y="0"
           width={props.width}
@@ -74,7 +86,7 @@ export default {
           </clipPath>
 
           <linearGradient id={idGradient}>
-            <stop offset="0%" stop-color={props.primaryColor}>
+            <stop offset="0%" stop-color={props.primaryColor} stop-opacity={props.primaryOpacity}>
               {props.animate ? (
                 <animate
                   attributeName="offset"
@@ -84,7 +96,7 @@ export default {
                 />
               ) : null}
             </stop>
-            <stop offset="50%" stop-color={props.secondaryColor}>
+            <stop offset="50%" stop-color={props.secondaryColor} stop-opacity={props.secondaryOpacity}>
               {props.animate ? (
                 <animate
                   attributeName="offset"
@@ -94,7 +106,7 @@ export default {
                 />
               ) : null}
             </stop>
-            <stop offset="100%" stop-color={props.primaryColor}>
+            <stop offset="100%" stop-color={props.primaryColor} stop-opacity={props.primaryOpacity}>
               {props.animate ? (
                 <animate
                   attributeName="offset"