Corrupt zoom and scaling of inline svg in IE11 - canvas fix implemented using jQuery

[Chris75forumname]

Thank you very much for the a2s plugin!! It is brilliant!!

I use it for process design in an intranet environment, where IE11 is mandatory for easy and save file access on our intranet server. But, unfortunately, there is an old and well known issue with zoom and scaling of inline svg in IE11. Since a2s plugin dynamically inserts svg of varying sizes into the DOM, this scaling problem in IE11 can be very frustrating for intranet users like me, because, apparently, there exists no easy fix with CSS alone.

I found the idea for the <canvas> workaround here: https://www.mediaevent.de/tutorial/svg-responsive.html ! All it does, is, wrapping the svg.a2s with a <div> element, and placing inside the <div> element, side by side with the svg.a2s, a dummie <canvas> element, and applying some simple CSS for styling. The <canvas> element ensures proper zoom and scaling in IE11. Therefore, it needs to be fitted with the width and height of the svg.a2s, accordingly. Here is the implementation for javascript / jQuery. It can be copied to dokuwiki/conf/userscript.js.

JS:

   jQuery(function(){
      if( jQuery( "svg.a2s" ).length > 0 ) {
         var $svg_a2s = jQuery( "svg.a2s" );
         for (var i=0; i<$svg_a2s.length; i++) {
            // ----- viewBox calculation -----
            var $svg_viewBox = jQuery($svg_a2s[i]).attr('viewBox');
            $svg_viewBox = $svg_viewBox.replace(/\s\s+/g, ' ');
            var $svg_width = $svg_viewBox.split(' ')[2];
            var $svg_height = $svg_viewBox.split(' ')[3];
            // ----- HTML - canvas fix -----
            jQuery($svg_a2s[i]).wrap("<div class='svg_fix'></div>");
            jQuery($svg_a2s[i]).parent().append("<canvas class='svg_fix' width='" + $svg_width + "' height='" + $svg_height + "'></canvas>");
            jQuery($svg_a2s[i]).attr('width', '100%').attr('height', '100%');
         }
      }
   });

CSS:

   svg.a2s {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
   }
   div.svg_fix {
      position:relative;
      margin-left:auto; 
      margin-right: auto;
   }
   canvas.svg_fix {
      display: block;
      width: 100%;
      visibility: hidden;
   }

This fix works with multiple svg.a2s per page. Now, sizing of SVGs on the page can easily be achieved by changing the width of the canvas element. The same could probably be incorporated into the syntax.php and the style.css of the a2s plugin.