I found that the visual effect of the linear gradient color is different between SVG and CSS, especially in the adjacent part between two colors. I want to know if this is due to differences in linear interpolation. And is there a solution to make the effect of the SVG the same as the CSS?
<code>#rectangle {
width: 100px;
height: 300px;
background: linear-gradient(
180deg,
rgba(235, 116, 116, 0.1) 0%,
rgba(42, 255, 44, 1) 100%
);
}
.stop1 {
stop-color: rgba(235, 116, 116, 0.1);
stop-opacity: 0.1;
}
.stop2 {
stop-color: rgba(42, 255, 44, 1);
}</code>
<code>#rectangle {
width: 100px;
height: 300px;
background: linear-gradient(
180deg,
rgba(235, 116, 116, 0.1) 0%,
rgba(42, 255, 44, 1) 100%
);
}
.stop1 {
stop-color: rgba(235, 116, 116, 0.1);
stop-opacity: 0.1;
}
.stop2 {
stop-color: rgba(42, 255, 44, 1);
}</code>
#rectangle {
width: 100px;
height: 300px;
background: linear-gradient(
180deg,
rgba(235, 116, 116, 0.1) 0%,
rgba(42, 255, 44, 1) 100%
);
}
.stop1 {
stop-color: rgba(235, 116, 116, 0.1);
stop-opacity: 0.1;
}
.stop2 {
stop-color: rgba(42, 255, 44, 1);
}<code><p>CSS</p>
<div id='rectangle'></div>
<p>SVG</p>
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1" spreadMethod="repeat">
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="100%" />
</linearGradient>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="100" height="300" fill="url(#Gradient1)" />
</svg></code>
<code><p>CSS</p>
<div id='rectangle'></div>
<p>SVG</p>
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1" spreadMethod="repeat">
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="100%" />
</linearGradient>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="100" height="300" fill="url(#Gradient1)" />
</svg></code>
<p>CSS</p>
<div id='rectangle'></div>
<p>SVG</p>
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1" spreadMethod="repeat">
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="100%" />
</linearGradient>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="100" height="300" fill="url(#Gradient1)" />
</svg>