他都是。面对这样的问题 - 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的最新版本)