Angular and SVG filters

by

The problem

The problem is that there is a <base> tag in my HTML page. Therefore, the IRI used to identify the filter is not anymore relative to the current page, but to the URL indicated in the <base> tag.

This URL was also the URL of my home page, http://example.com/my-folder/ for instance.

For the pages other than the home page, http://example.com/my-folder/site/other-page/ for example, #blurred was computed to the absolute URL http://example.com/my-folder/#blurred. But for a simple GET request, without JavaScript, and therefore without AngularJS, this is simply my base page, with no template loaded. Thus, the #blurred filter doesn’t exist on this pages.

In such cases, Firefox doesn’t render the <rect> (which is the normal behaviour, see the W3C recommandation). Chrome simply doesn’t apply the filter.

For the home page, #blurred is also computed to the absolute URL http://example.com/my-folder/#blurred. But this time, this is also the current URL. There is no need to send a GET request, and thus the #blurred filter exists.

I should have seen the additional request to http://example.com/my-folder/, but in my defense, it was lost in a plethora of other requests to JavaScript files.

The solution

If the <base> tag is mandatory, the solution is to use an absolute IRI to identify the filter. With the help of AngularJS, this is pretty simple. In the controller or in the directive that is linked to the SVG, inject the $location service and use the absUrl() getter:

$scope.absUrl = $location.absUrl();

Now, in the SVG, just use this property:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="blurred">
            <feGaussianBlur stdDeviation="5"/>
        </filter>
    </defs>
    <rect style="filter:url({{absUrl}}#blurred)" fill="red" height="200" width="300" />
</svg>

Related: SVG Gradient turns black when there is a BASE tag in HTML page?

More Related Contents:

  1. Is it feasible for a start-up of two developers to do full automated regression testing without manual testing? [closed]
  2. ng-model for “ (with directive DEMO)
  3. How to iterate over the keys and values with ng-repeat in AngularJS?
  4. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  5. AngularJS execution order with `$q` — Chaining Promises
  6. AngularJS For Loop with Numbers & Ranges
  7. Show spinner GIF during an $http request in AngularJS?
  8. AngularJS-Twig conflict with double curly braces
  9. AngularJS – Create a directive that uses ng-model
  10. Can I make a function available in every controller in angular?
  11. How to send POST in angularjs with multiple params?
  12. unsafe link in angular
  13. Handle HTTP 302 response from proxy in angularjs
  14. How can I pass some data from one controller to another peer controller [duplicate]
  15. Angular – ui-router get previous state
  16. Binding variables from Service/Factory to Controllers
  17. AngularJs Remove duplicate elements in ng-repeat
  18. Angularjs how to cancel resource promise when switching routes
  19. How to highlight a current menu item?
  20. AngularJS All slashes in URL changed to %2F
  21. How can you limit the value from input using AngularJS?
  22. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
  23. Lazy loading AngularJS modules with RequireJS
  24. How to make orderby filter work on array of strings?
  25. stop angular-ui-router navigation until promise is resolved
  26. How do i use $on in a service in angular?
  27. Illegal use of ngTransclude directive in the template
  28. How to highlight a selected row in ngRepeat?
  29. AngularJS – Injecting factory from another module into a provider
  30. How does AngularJS $watch these cases in an ng-repeat?

Leave a Comment