Есть такой пример, чтобы долго не объяснять, меняйте последнюю координату и увидите что происходит.
Js, к данной проблеме не имеет ни какого отношения (смотреть пример 2)
, функция которая меняет последнюю координату path
, только для того, чтобы людям которые будут читать вопрос, было бы легко и быстро увидеть проблему.
Что касается замены path
на rect
, не получиться... Это малая часть большого сложного, где нельзя заменить path
на rect
.
const input = document.querySelector('input');
document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
input.addEventListener('input', function() {
document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
background-color: #272727;
}
div.wrapper {
height: 500px;
background-color: #10e7dd;
display: flex;
justify-content: space-around;
align-items: center;
}
input {
height: 50px;
width: 100px;
text-align: center;
font-size: 25px;
}
svg {
background-color: grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#00f" />
</linearGradient>
</defs>
<path class="path" stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/>
</svg>
<div>
<input type="number" value="250">
</div>
</div>
Вот как выглядит без JS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
background-color: #272727;
}
div.wrapper {
height: 500px;
background-color: #10e7dd;
display: flex;
justify-content: space-around;
align-items: center;
}
svg {
background-color: grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<linearGradient id="gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#00f" />
</linearGradient>
</defs>
<path class="path" stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250"/>
</svg>
</div>
Что это, баг? Как это исправить?