有这样一个例子,免得解释半天,把最后一个坐标改一下,看看会发生什么。
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>
这是什么,bug?如何解决?
假设元素距离水平线的高度为零(笔划不影响元素的大小),默认梯度大小是根据元素的大小计算的(
objectBoundingBox
)。如果您添加渐变,gradientUnits="userSpaceOnUse"
那么它可以工作。但是,应该记住,渐变的坐标将相对于整个 SVG 元素的坐标系进行计算。
将线更改为矩形。在使用渐变的意义上,对于您的应用程序,也许它会更可靠。
改变渐变条的大小取决于
input
渐变条纹动画