title: The SVG pattern doesn't work with AngularJS $routeProvider
body: <p>I'm using AngularJS to handle routes in a website that makes use of SVG.
  Through the $routeProvider I simply assign the template "/test_folder/test.html" to the route "/test"</p>
  
  <p>The problem is that, when I use the fake url, the pattern element stops rendering even though the image absolute url is correct. In fact the image element works correctly outside the pattern element.</p>
  
  <p>This is the code I'm using to test the pattern with the Snap.svg.js library.</p>
  
  <pre><code>&lt;svg id="test-svg" width="500" height="500"&gt;&lt;/svg&gt;  
  &lt;script&gt;
  var s = Snap("#test-svg");
  
  // creates the pattern element
  var imagePattern = s.image('/img/test.png', 30, 30, 200, 180);
  var pattern = imagePattern.toPattern(30, 30, 200, 180);
  
  // creates the path filled with the image pattern
  var path = s.path("M30,30 200,180 30,180").attr({
      fill: pattern,
      stroke: "#000",
      strokeWidth: 3});
  
  // another image element to test that the image url is working
  var image = s.image('/img/test.png', 200, 200, 200, 150);
  &lt;/script&gt;
  </code></pre>
  
  <p>I can reach the test page both with the real address and the fake address, but the pattern element works only in the first case.</p>
  
  <p><img src="https://i.stack.imgur.com/8idje.jpg" alt="enter image description here"></p>
  
  <p>In my .htaccess I have few rules to redirect all non-existing paths to the angularjs $routeProvider.</p>
  
  <p>Can someone explain me why this error occurs? Is it possible to fix?</p>