缩小会破坏 SVG 到图像的转换答案

【问题标题】：Minification disrupts SVG to Image transformation缩小会破坏 SVG 到图像的转换
【发布时间】：2016-01-14 06:47:00
【问题描述】：

在我的 Angular 应用程序中，我使用 canvg 将 SVG 转换为图像。在应用 canvg 之前，我将样式规则附加到序列化的 svg 字符串。见代码：

      var svg = document.getElementsByTagName("svg");
      var svgClone = svg[0].cloneNode(true);

      var viewbox = svgClone.getAttribute( 'viewBox' ).split( ' ' )


      var width = 2*viewbox[2] - viewbox[0];
      var height = 2*viewbox[3] - viewbox[1];


      svgClone.setAttribute("width",  width);
      svgClone.setAttribute("height", height);

      console.log(svgClone)
      var serializer = new XMLSerializer();
      var svgString;
      var canvas = document.getElementById("empty-canvas");
      var str;
      var styleTag;

      var style = "\n";

      for (var i = 1; i < document.styleSheets.length; i++) {

        str = document.styleSheets[i].href.split("/");

        if (str[str.length - 1] == "svg.css") {
          var rules = document.styleSheets[i].rules;
          if (!rules) {
            var rules = document.styleSheets[i].cssRules; //firefox
          };
          for (var j = 0; j < rules.length; j++) {
            style += (rules[j].cssText + "\n");
          }
          break;
        }
      }
      styleTag = "<style type='text/css'>" + style + "</style>";
      $(svgClone).prepend(styleTag);
      svgString = serializer.serializeToString(svgClone);

      canvg(canvas, svgString, {

        renderCallback: function() {
          var pngImage = canvas.toDataURL('image/png');
          $scope.image = pngImage;
        }
      });

这在开发模式下运行良好。但是，当我将所有 js 文件缩小为生产模式时，此代码似乎不再起作用，因为生成的图像缺少样式（某些颜色、字体大小等）。

我很确定问题是缩小后的代码没有添加样式标签，但我不知道如何解决。

感谢任何提示让

【问题讨论】：

可能问题出在你没有详细描述的缩小过程中。

标签： angularjs svg minify

【解决方案1】：

看起来是指定的文件有问题

【讨论】：