我有一個帶有黑色輪廓的心的 svg。我有興趣將輪廓更改為紅色路徑，然后以編程方式單擊它后，我想將心臟完全填充為紅色。類似于點贊按鈕。我只能交換兩個不同的影像，但我想了解如何通過將引數更改為單個 svg 來完成它。這是心臟svg：
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path d="M24 41.95 21.95 40.1Q13.8 32.65 8.9 27.1Q4 21.55 4 15.85Q4 11.35 7.025 8.325Q10.05 5.3 14.5 5.3Q17.05 5.3 19.55 6.525Q22.05 7.75 24 10.55Q26.2 7.75 28.55 6.525Q30.9 5.3 33.5 5.3Q37.95 5.3 40.975 8.325Q44 11.35 44 15.85Q44 21.55 39.1 27.1Q34.2 32.65 26.05 40.1ZM24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15ZM24 38Q31.6 31 36.3 25.85Q41 20.7 41 15.85Q41 12.55 38.875 10.425Q36.75 8.3 33.5 8.3Q31 8.3 28.8 9.85Q26.6 11.4 25.2 14.3H22.75Q21.4 11.4 19.175 9.85Q16.95 8.3 14.5 8.3Q11.2 8.3 9.1 10.425Q7 12.55 7 15.85Q7 20.7 11.7 25.85Q16.4 31 24 38Z" />
</svg>
如果我有元素的fill引數，特別是它，它會負責創建一個紅色輪廓，這是我想要的默認行為。我可以使用另一個引數來使 SVG 的內部變成完全紅色，而不僅僅是心形的輪廓嗎？svgfill="red"
uj5u.com熱心網友回復：
與其嘗試填充當前僅構成“筆觸”的路徑（在這種情況下實際上是整個 SVG），不如使用實心的心形然后更改帶有簡單 classList.toggle javascript 的屬性。這樣，您可以獨立控制描邊和填充。
let svg = document.getElementById("heart");
svg.addEventListener('click', function() {
svg.classList.toggle("filled");
})body {
background-color: lightgrey;
}
#heart {
fill: transparent;
stroke: red;
stroke-width: 20px;
transition: all 0.6s linear;
}
#heart.filled {
fill: red;
stroke: red;
stroke-width: 20px;
transition: all 0.6s linear;
}<svg id="heart" xmlns="http://www.w3.org/2000/svg" height="200px" width="200px" viewBox="0 0 612 792">
<path d="M611.721,288.299c-2.258-42.176-20.114-81.782-50.287-111.524c-30.557-30.119-70.43-46.708-112.27-46.708
c-62.267,0-107.396,49.233-131.641,75.684c-3.743,4.085-8.13,8.87-11.183,11.79c-2.444-2.529-5.756-6.3-8.803-9.768
c-22.142-25.222-68.223-77.704-134.688-77.704c-41.84,0-81.711,16.588-112.268,46.708C20.408,206.517,2.547,246.121,0.29,288.299
c-2.248,42.107,8.521,78.746,34.92,118.803c20.888,31.701,75.961,93.605,133.927,150.543c29.856,29.326,57.336,54.18,79.466,71.873
c35.936,28.729,49.7,32.413,57.674,32.413c7.476,0,21.614-3.352,57.895-32.332c22.079-17.637,49.463-42.451,79.194-71.76
c57.445-56.63,112.318-118.617,133.443-150.743C594.576,380.072,614.6,342.151,611.721,288.299z"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482069.html