title: Image inside SVG shape path renders as black in Safari
body: <p>I have a really odd Safari bug. I have an image inside an SVG shape path, here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;defs&gt;
          &lt;pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"&gt;
              &lt;image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
      &lt;path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"&gt;&lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The image renders fine on the home page but the same code on all other pages renders the shape as black and no image, although in the inspector I can see the image is loaded. All other browsers it's fine.</p>
  
  <p>The left shape is an example of it rendering correctly on the home page and the right is how it renders on every other page. Same template, same code.
  <a href="https://i.stack.imgur.com/Z9oP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z9oP4.png" alt="svg shapes"></a></p>
  
  <p>Any ideas? Been pulling my hair out for hours, thanks.</p>