SVG template not working with AngularJS $ routeProvider

I am using AngularJS to handle routes on a website using SVG. Through $ routeProvider, I simply assign the template "/test_folder/test.html" to the route "/ test"

The problem is that when I use a fake url the template element stops rendering even though the absolute url of the image is correct. In fact, the image element works correctly outside of the template element.

This is the code I am using to validate the template using the Snap.svg.js library.

<svg id="test-svg" width="500" height="500"></svg>  
<script>
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);
</script>

      

        
        
        
      

    

I can get to the test page with both a real url and a fake url, but the template element only works in the first case.

In my .htaccess, I have some rules for redirecting all non-existent paths to angularjs $ routeProvider.

Can someone explain to me why this error occurs? Can you fix it?