Я пытаюсь растянуть часть моего изображения SVG, используя свойство transform, чтобы масштабировать только среднюю часть моего изображения SVG, используя его идентификатор. Он начинает масштабироваться, однако, когда моя средняя часть изображения выходит из div, она вообще не отображается. Я пытаюсь масштабировать часть изображения из его идентификатора, а не создавать отдельные файлы SVG для каждой части. Я пробовал искать везде и не нашел решений, использующих jquery.
Я попытался использовать свойство transform в родительском div, и там оно прекрасно работает. Однако, когда я пытаюсь сделать то же самое для дочернего элемента (используя идентификатор для расширения указанной части c), он начинает растягиваться, но как только он покидает родительский элемент div, он начинает исчезать.
Я хочу растянуть мое изображение так, чтобы последняя часть моего изображения была постоянной, но средняя часть увеличивалась только при толкании последней части моего изображения по вертикали, когда средняя часть увеличивается.
Это это изображение
, и оно делает что-то подобное при использовании преобразования. Я пытаюсь расширить только красную часть и ..
Здесь часть хорошо вытянута, я проверил, используя inspect, но ничего не показывается после он покидает div.
И также не должен толкать нижнюю часть вниз. Что мне не хватает? Если вы можете, пожалуйста, предоставьте мне ссылку, если я могу учиться и узнать что-нибудь отсюда. Правильный ли подход? Что угодно.
Вот мой код (см. Также JSFiddle )
$(document).ready(function(){
$(document).scroll(function(){
x = $(document).scrollTop();
y = x/5;
if (y < 1){
$(' .Pencil, #Middle').css('transform','none');
}
else{
if (($(document).height()) > 950){}
else{
$('#Middle').css({
'transform' : 'scaleY('+ y/4 + ')',
});
var new_height = $('#expandablePencil')[0].getBBox().height;
if ($('.Pencil').height() < 200){
}
else{
$('.Pencil').css({
'height' : x + "px"
});
}
}
var new_height = $('#expandablePencil')[0].getBBox().height;
}
console.log(new_height);
});
})
*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main{
height: 800px;
padding: 20px;
}
.svgPencil{
position: absolute;
right: 10px;
top: 30px;
}
.Pencil{
width: 20px;
height: 100px;
transform-origin: top;
}
#expandablePencil{
height: 100%;
width: 100%;
}
#Middle{
transform-origin: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="svgPencil">
<div class="svgImage">
<svg class="Pencil">
<use href="#pencilImage" id="expandablePencil"></use>
</svg>
</div>
</div>
<div class="row">
<div class="col-lg-6">
This is half part
</div>
<div class="col-lg-6">
This is the another half
</div>
</div>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pencilImage" x="0px" y="0px" viewBox="0 0 30 134.4"
style="enable-background:new 0 0 30 134.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4D4D4F;}
.st1{fill:#CA4062;}
</style>
<g id="Top">
<rect y="0" class="st0" width="30" height="30"/>
</g>
<g id="Middle">
<rect y="42" class="st1" width="30" height="40.9"/>
</g>
<g id="Bottom">
<polygon class="st0" points="15.4,134.4 23.6,116.5 6.3,116.5 "/>
<path class="st1" d="M0,82.9v17.7C0,96.4,3.4,93,7.5,93c3.2,0,5.8,2,7,4.7c0.2,0.5,0.8,0.5,1.1,0c1.1-2.8,3.8-4.7,7-4.7
c4.1,0,7.5,3.4,7.5,7.5l0,0V82.9H0z"/>
</g>
</symbol>
</svg>