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"
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.
This is the code I'm using to test the pattern with 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 reach the test page both with the real address and the fake address, but the pattern element works only in the first case.
In my .htaccess I have few rules to redirect all non-existing paths to the angularjs $routeProvider.
Can someone explain me why this error occurs? Is it possible to fix?
