svg outline and fill-CodePudding

I have an svg of a heart with a black outline. I am interested in changing the outline to a red path, and then programmatically once it is clicked, I would like to fill the heart completely red. Similar to a like button. I can just have two different images I swap, but I would like to understand how it can be done by just changing parameters to a single svg. Here is the heart 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>

if I had the fill parameter to the svg element, specifically fill="red" it, takes care of creating a red outline, which is the default behavior I want. Is there another parameter I can use so that the interior of the SVG will turn completely red and not just the outline of the heart shape?

CodePudding user response：

Rather than trying to fill in what you have which is currently a path that makes up only the "stroke" (which in this case is actually the entire SVG), it would be much easier to use a heart shape that is solid and then change the attributes with a simple classList.toggle javascript. This way, you could control the stroke and the fill independently.

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>