Мне нужно показать несколько изображений SVG при прокрутке. Должно получиться так, что графика нарисована. Он должен работать в IE11. Вот почему я решил поместить белый div поверх SVG и анимировать размер от 100% до 0% белого div.
Проблема в том, что последняя графика 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>
Я сократил код. Я заметил, что когда я снова прокручиваю после завершения анимации, изображение штриха отображается правильно. Похоже, что он перерисовывается, когда я снова прокручиваю.
Не могли бы вы попытаться сократить свой код до минимальный воспроизводимый пример? Найти здесь нужные детали непросто.