Question

在我的角度应用程序中，我使用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文件缩小为生产模式时，此代码似乎不再起作用，因为生成的图像缺少样式（某些颜色，字体大小等）。

我非常确定问题是缩小的代码没有预先设置样式标记，但我不确定如何解决它。

任何提示都表示赞赏让

Answer 1

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

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

1 个答案: