SVG揭示动画错误-虚线未正确显示

Question

我需要滚动显示几个SVG图形。看起来像是绘制了图形。它必须在IE11上工作。这就是为什么我决定在SVG上放置一个白色填充的div并为白色div的100％到0％设置动画的原因。

问题是最后一个SVG图形看起来像图形渲染错误。虚线是“不是平均虚线”。为什么会这样？

这是正确的方法吗？

(function($) {

 
  $.fn.animateRightToLeft02 = function() {
    var aw_object = this;
    aw_object.delay(200);
    aw_object.animate({
      width: '10%',
    }, 700);

    return this;
  };

  $.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };

  $(window).on('resize scroll', function() {
    if ($('#aw_step_04').isInViewport()) {
      $('#aw_mask_04').animateRightToLeft02();
    }
  });

}(jQuery));

body {
  font-size: 16px;
}


.aw_row_bild_text,
.aw_row_text_bild {
  padding: 0 1rem;
  height: 350px;
}

.aw_col_left {
  position: relative;
  float: left;
  height: 100%;
}

.aw_col_right {
  float: right;
  position: relative;
  height: 100%;
}

.aw_row_bild_text .aw_col_left {
  width: 54%;
}

.aw_row_bild_text .aw_col_right {
  width: 46%;
  z-index: 99;
}

.aw_white_mask {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 90;
  transform-origin: right bottom;
  position: relative;
  left: 0;
}

.aw_svg_process_01 {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='100pt' height='100pt' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m39.168 16.668l-23.125 16.664 11.039 7.918 22.918-16.668z'/%3E%3Cpath d='m60.832 16.668l23.125 16.664-11.039 7.918-22.918-16.668z'/%3E%3Cpath d='m60.832 65.832l23.125-16.664-11.039-7.918-22.918 16.668z'/%3E%3Cpath d='m39.168 65.832l-23.125-16.664 11.039-7.918 22.918 16.668z'/%3E%3Cpath d='m63.332 69.168l-2.5 1.875-2.2891-1.875-8.543-6.043-8.543 6.043-2.2891 1.875-2.5-1.875-9.5859-6.875v6.457l22.918 16.668 22.918-16.668v-6.457z'/%3E%3C/g%3E%3C/svg%3E");
}

.aw_svg_process_01,
.aw_svg_process_02,
.aw_svg_process_03,
.aw_svg_process_04 {
  height: 50%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 45%;
}


.process_stroke_04 {
  width: 100%;
  height: 50%;
  overflow: hidden;
  ;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right center;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='285px' height='37px' viewBox='0 0 285 37' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EGroup 2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3Cpolygon id='path-1' points='0 0.107987143 36.894254 0.107987143 36.894254 37 0 37'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Favoriten' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop-HD' transform='translate(-480.000000, -2390.000000)'%3E%3Cg id='Group-2' transform='translate(477.000000, 2390.000000)'%3E%3Cpath d='M288,19 L0.5,19' id='Path-3' stroke='%23E3001B' stroke-dasharray='3'%3E%3C/path%3E%3Cg id='Group-18' transform='translate(233.000000, 0.000000)'%3E%3Cg id='Group'%3E%3Cg id='Group-6'%3E%3Cg id='Group-3'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Clip-2'%3E%3C/g%3E%3Cpath d='M18.4468469,37 C28.6356426,37 36.894254,28.7413886 36.894254,18.5525929 C36.894254,8.36659857 28.6356426,0.107987143 18.4468469,0.107987143 C8.25805114,0.107987143 -0.000560285714,8.36659857 -0.000560285714,18.5525929 C-0.000560285714,28.7413886 8.25805114,37 18.4468469,37' id='Fill-1' fill='%23E3001B' mask='url(%23mask-2)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Ctext id='4' font-family='MuseoSans-700, Museo Sans' font-size='20' font-weight='500' letter-spacing='2.6875' fill='%23FFFFFF'%3E%3Ctspan x='11.94625' y='26'%3E4%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="aw_row_bild_text" id="aw_step_04">

  <div class="aw_col_left">
    <div class="aw_col_left aw_svg_process_01" style="width:60%;"></div>
    <div class="aw_col_right process_stroke_04" style="width:40%;">
      <div class="aw_white_mask" id="aw_mask_04"></div>

    </div>
  </div>
  <div class="aw_col_right">
    <div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>