如何将SVG的高度设置为其封闭容器的高度？

Question

Apparently, setting the svg 's height to 100% doesn't always work.

Consider the following snippet:

 function createBar(color) { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect') svg.appendChild(rect) rect.setAttribute('height', '100%') rect.setAttribute('width', '100%') rect.setAttribute('fill', color) return svg } document.getElementById('health').appendChild(createBar('crimson')) document.getElementById('stamina').appendChild(createBar('orange')) document.getElementById('shield').appendChild(createBar('teal')) 

 ul { display: grid; list-style-type: none; padding: 0; grid-template-columns: max-content 1fr; } li { display: contents; } svg { width: 100%; height: 100%; display: inline; } 

 <ul> <li id="health"><span>Health: </span></li> <li id="stamina"><span>Stamina: </span></li> <li id="shield"><span>Shield: </span></li> </ul> 

My intention was to set these 3 svg s to match the height of the lines. I thought I'd be clever with my height: 100% solution: If I made certain that 100% referred to the height of the line, setting the svg to height: 100% would give me what I wanted.

Sadly, as you can see above, this wont work. The svgs are enormous.

I am surprised because if I remove the svgs and replace them with spans this suddenly starts working exactly as expected:

 ul { display: grid; list-style-type: none; padding: 0; grid-template-columns: max-content 1fr; grid-template-rows: max-content; } li { display: contents; } span:last-child { width: 100%; background-color: red; height: 100%; } 

 <ul> <li><span>Health: </span><span style="background-color: crimson;"></span></li> <li><span>Stamina: </span><span style="background-color: orange;"></span></li> <li><span>Shield: </span><span style="background-color: teal;"></span></li> </ul> 

Why do svg s not obey height: 100% , even though span s do obey this? How can I make the svg s height match the height of the enclosing container anyway? That is, while making certain the enclosing container's height matches the height of the line - I don't want to set the height of the text ('Stamina', 'Shield', 'Health') explicitely to eg 10px .

Appendix: Why I want it and research I've done

• I want the svg height to match the height of the line that says Shield , Health , Stamina ;
• This question discusses this , but:
  • Its first answer suggests setting the image's height to 1em but despite the green tick and upvotes this is simply wrong, even though it works with svg s. Proof below.
  • Its second answer suggests explicitely setting the line height, which I'd like to avoid. Reason: Throughout the site I'm using font-size s like smaller .
• Another question that discusses it . It has 3 answers:
  • First suggests setting the svg as abackground image - I don't want it since I want to generate the svg via JS;
  • Second once again suggest explicitly setting the line height
  • Third answer wants to use flexbox but I want to use grid for the reason that I want the division into 2 columns.

Proof that setting to 1em won't work:

 function createBar(color) { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect') svg.appendChild(rect) rect.setAttribute('height', '100%') rect.setAttribute('width', '100%') rect.setAttribute('fill', color) return svg } document.getElementById('health').appendChild(createBar('crimson')) document.getElementById('stamina').appendChild(createBar('orange')) document.getElementById('shield').appendChild(createBar('teal')) 

 ul { display: grid; list-style-type: none; padding: 0; grid-template-columns: max-content 1fr; } li { display: contents; } svg { width: 100%; height: 1em; display: inline; } 

 <ul> <li id="health"><span>Health: </span></li> <li id="stamina"><span>Stamina: </span></li> <li id="shield"><span>Shield: </span></li> </ul> 

As you can see there are white gaps between the bars.

Answer 1

Since it works fine using span, consider the SVG inside the span element. Note the use of height:0;min-height:100% to avoid creating a cycle with height:100% . So we set the height to 0 (it won't affect the height of the parents) then we force it to 100% using min-height (we already have the height of the parent element)

 function createBar(color) { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect') svg.appendChild(rect) rect.setAttribute('height', '100%') rect.setAttribute('width', '100%') rect.setAttribute('fill', color) return svg } document.querySelector('#health span:last-child').appendChild(createBar('crimson')) document.querySelector('#stamina span:last-child').appendChild(createBar('orange')) document.querySelector('#shield span:last-child').appendChild(createBar('teal')) 

 ul { display: grid; list-style-type: none; padding: 0; grid-template-columns: max-content 1fr; } li { display: contents; } span:last-child{ display:block; width: 100%; height: 100%; } svg { display:block; height:0; min-height:100%; width: 100%; } 

 <ul> <li id="health"><span>Health: </span><span></span></li> <li id="stamina"><span>Stamina: </span><span></span></li> <li id="shield"><span>Shield: </span><span></span></li> </ul> 

In your code you are facing an issue related to percentage height where the reference isn't explicetely defined so it's failling to auto. Note that it's working fine with Chrome which is able to identify the reference to be the height of the text content.