将SVG元素转换为IE

Question

他都是。面对这样的问题 - IE浏览器中没有svg元素的动画（偏移）（Chrome和Firefox应该按原样运行），请告诉我，我该如何解决？

var eyeCircle = $(".bl_eye_circle");
buttonEye = $(".bl_eye");

buttonEye.on("click", function() {
  eyeCircle.css({
    msTransform: 'translateX(80px)'
  });
});

.bl_eye {
  position: relative;
  margin-top: 58px;
  margin-left: 50px;
  display: inline-block;
  vertical-align: bottom;
  width: 95px;
  height: 95px;
  box-sizing: border-box;
  z-index: 999;
}

.bl_eye-checkbox {
  position: absolute;
  top: 25%;
  left: 45%;
}

.bl_eye #swich {
  cursor: pointer;
  z-index: 999;
}

.bl_eye-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bl_eye .swichRectangl {
  fill: #201600;
  transition: all ease .3s;
}

.bl_eye .eyeborowLeft {
  opacity: 1;
  stroke-width: 3;
  fill: none;
  stroke-miterlimit: 10;
  stroke: #201600;
  transition: all ease .3s;
}

.bl_eye .eyeborowRight {
  fill: none;
  stroke-width: 1.6;
  stroke-miterlimit: 10;
  stroke: #fad9c2;
  transition: all ease .3s;
  opacity: 0;
}

.bl_eye .tongue {
  stroke: #201600;
  transition: all ease .3s;
}

.bl_eye .st1 {
  fill: #ed7d31;
}

.bl_eye .bl_eye_circle {
  fill: #ed7d31;
  transition: all ease .3s;
}

.bl_eye .mouth {
  fill: none;
  stroke: #201600;
  stroke-width: 3;
  stroke-miterlimit: 10;
  transition: all ease .3s;
}

.bl_eye .swich_text {
  font-size: 14px;
  font-family: "ArciformSanscyr", sans-serif;
  fill: #ed7d31;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .bl_eye_circle {
  -webkit-transform: translateX(80px);
  -ms-transform: translateX(80px);
  transform: translateX(80px);
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .eyeborowRight {
  opacity: 1;
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .eyeborowLeft {
  opacity: 0;
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .swichRectangl {
  fill: #fad9c2;
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .mouth {
  stroke: #fad9c2;
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .tongue {
  stroke: #fad9c2;
  fill: #fad9c2;
  transition: all ease .3s;
}

.bl_eye .bl_eye-checkbox:checked+.bl_eye-label .swich_text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bl_eye">
  <input class="bl_eye-checkbox" type="checkbox" name="onoffswitch" id="bl_eye-checkbox">
  <label class="bl_eye-label" for="bl_eye-checkbox">
    <svg xmlns="http://www.w3.org/2000/svg" id="swich" x="0px" y="0px" viewBox="0 0 95 95" style="enable-background:new 0 0 95 95;" xml:space="preserve">
      <g transform="matrix(0.4615373,0,0,0.4615373,-70.294661,-182.88295)">
        <path class="swichRectangl" d="M296.7,496.9H214c-21.4,0-38.8-17.5-38.8-38.8l0,0c0-21.4,17.5-38.8,38.8-38.8h82.7   c21.4,0,38.8,17.5,38.8,38.8l0,0C335.6,479.4,318.1,496.9,296.7,496.9z" />
        <circle r="34" cy="458" cx="215" class="bl_eye_circle" />
        <path class="eyeborowLeft" d="M168,458.1c0-25.8,20.9-46.7,46.7-46.7" />
        <text class="swich_text" transform="matrix(2.1667 0 0 2.1667 269.3049 455.45)">ме</text>
        <text class="swich_text" transform="matrix(2.1667 0 0 2.1667 269.0055 478.4498)">ню</text>
        <path class="mouth" d="M178.4,517.7c42.5,42.5,111.4,42.5,153.9,0" />
        <path class="tongue" d="M312.3,551.8l-4.9,2.5c-4.2,2.1-9.3,0.4-11.4-3.8l-3.6-7.3l20.2-10l3.6,7.3   C318.2,544.5,316.4,549.7,312.3,551.8L312.3,551.8z" />
      </g>
      <path class="eyeborowRight" d="m 66.80813,7.0981188 c 11.82374,0 21.40188,9.5781442 21.40188,21.4018812" />
      </g>
    </svg>
  </label>
</div>

即使使用预定义的供应商前缀，也无法在IE浏览器中移动此SVG圈，如何解决？ （我有Internet Explorer的最新版本）