我想做一個水滴svg，顯示水箱里的水是什么水平。 我用一個線性梯度來做，所以我可以用圖形顯示（而且很容易）水是一半還是滿的，等等。 在這個例子中，我顯示水箱是半滿的。 我想給水滴添加一個3D效果，我找到了一個用徑向漸變的方法，但我不知道如何將兩個漸變同時加載到同一個svg圖片上，如果這不可能，有人知道如何代替下面的方法嗎？ 我不希望在我的例子中點擊這里，它只是顯示了我試圖添加到半滿的水滴上的3D外觀。 希望你能明白我的意思，有什么辦法能讓我在頁面加載時在單一的svg圖片上同時出現兩種梯度？ 謝謝你。
。<!DOCTYPE html>
<html>
<head>
<style>
.tele {
行程：黑色。
stroke-width: 0.4px;
transform-origin: top center;
</style>>
</head>
<body>
<div id='clickMe'> Click here ! </div>
<div class="box">/span>
< svg width="10%" viewbox="0 0 50 42">
<defs>
< linearGradient id="grad1"/span> x1="0%" y1="100%"/span> x2="0%"/span> y2="0%"/span>>。
<stop offset="48%"/span> style="stop-color: rgb(0,0,255);stop-opacity:1" />
<stop offset="50%" style=stop-color。 rgb(255,255,255);stop-opacity:1" />
</linearGradient>
< radialGradient id="dropGradient" gradientTransform="rotate(-20)">
< stop offset="10%" stop-color="white" />
< stop offset="95%" stop-color="blue" />
</radialGradient>
</defs>/span>
<path id="tear" class="tear"
d="M15 6
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z"
fill="url(#grad1)"/span>/>
</svg>
</div>/span>
<b>水箱50%滿</b>
</body>/span>
<script>
function change（） {
let tear = document.getElementById('tele') 。
tear.setAttribute("fill", "url(#dropGradient)") 。
}
var click1 = document.getElementById('clickMe') 。
click1.addEventListener("click", change)。
</script>>
</html>/span>uj5u.com熱心網友回復：
現在兩個漸變的藍色是一樣的，你可以使用線性漸變作為下降的掩碼。這個遮罩是由一個<rect>和drop<path>本身組成的。是這樣的嗎？
這就剎住了你的點擊事件，但我想你可以弄清楚:-)
更新：我將線性漸變的一部分變成了深灰色（#444），這樣就可以在下降的 "空 "的部分看到徑向漸變了。
。<!DOCTYPE html>
<html>
<head>
<style>
.tele {
行程：黑色。
stroke-width: .4px;
transform-origin: top center;
</style>>
</head>
<body>
<div id='clickMe'> Click here ! </div>
<div class="box">/span>
< svg width="10%" viewbox="0 0 50 42">
<defs>
< linearGradient id="grad1"/span> x1="0%" y1="100%"/span> x2="0%"/span> y2="0%"/span>>。
<stop offset="48%"/span> style="stop-color: white;stop-opacity:1" />
<stop offset="50%"/span> style="stop-color: #444;stop-opacity:1" />
</linearGradient>
< radialGradient id="dropGradient" gradientTransform="rotate(-20)">
< stop offset="10%" stop-color="white" />
< stop offset="95%" stop-color="blue" />
</radialGradient>
<mask id="m1"/span>>
< rect x="0" y="0" width="100%" height="100%" fill="白色"/>
<path
d="M15 6
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z"
fill="url(#grad1)"/span>/>
</mask>
</defs>/span>
<path id="tear" class="tear"
d="M15 6
Q 15 6, 25 18
A 12.8 12.8 0 1 1 5 18
Q 15 6 15 6z"
fill="url(#dropGradient)" mask="url(#m1)"/>
</svg>
</div>/span>
<b>水箱50%滿</b>
</body>/span>
<script>
function change（)
{
let tear = document.getElementById('tele') 。
tear.setAttribute("fill","url(#dropGradient)") 。
}
var click1 =document.getElementById('clickMe') 。
click1.addEventListener("click",change)。
</script>>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320120.html
標籤：