SVG positioning of dynamic elements

In HTML I would do this easily with a table, or with a flexbox.

However, this is being drawn into a SVG element, so i’m pondering the best way to handle the positioning.

I have a javascript object, which I will be walking through the keys of to output a series of <text> elements into a <g>.

I want the elements to take up no more than 75% of the height of the SVG, but the number of elements will vary. I do not worry about there being too many elements, but there may be anywhere from 1 to 40 of them.

What would be the best way to position these elements?

Sorry I can’t help as my svg knowledge is limited. :frowning:

Maybe @coothead has some suggestions as he seems to know his way around an svg :slight_smile:

1 Like

Hi there m_hutley,

@PaulOB has raised me from my slumber. :smashy:

Here then is a basic example…

 <svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    x="0" y="0" 
    viewBox="0 0 800 1000">
	<style media="screen">
	 svg {
          width:100%; 
          height: auto;
          box-sizing: border-box;
          border: 1px solid #999;
	  }
	  
	 text { 
          font-size:1em;
          }
	  
         text:nth-of-type( 4n + 1) {
          fill: #f00;
          }
	</style>
	
    <rect width="100%" height="25%" fill="rgba( 255, 0, 0, 0.25 )" />
	
    <g>
     <text x="2.5%" y="26.8%">My</text>
     <text x="2.5%" y="28.6%">cat</text>
     <text x="2.5%" y="30.4%">is</text>
     <text x="2.5%" y="32.2%">grumpy!</text>
     <text x="2.5%" y="34%">My</text>
     <text x="2.5%" y="35.8%">dog</text>
     <text x="2.5%" y="37.6%">is</text>
     <text x="2.5%" y="39.4%">grumpy!</text>
     <text x="2.5%" y="41.2%">My</text>
     <text x="2.5%" y="43%">partner</text>
     <text x="2.5%" y="44.8%">is</text>
     <text x="2.5%" y="46.6%">grumpy!</text>
     <text x="2.5%" y="48.4%">My</text>
     <text x="2.5%" y="50.2%">son</text>
     <text x="2.5%" y="52%">is</text>
     <text x="2.5%" y="53.8%">grumpy!</text>
     <text x="2.5%" y="55.6%">My</text>
     <text x="2.5%" y="57.4%">daughter</text>
     <text x="2.5%" y="59.2%">is</text>
     <text x="2.5%" y="61%">grumpy!</text>
     <text x="2.5%" y="62.8%">My</text>
     <text x="2.5%" y="64.6%">neighbours</text>
     <text x="2.5%" y="66.4%">are</text>
     <text x="2.5%" y="68.2%">grumpy!</text>
     <text x="2.5%" y="70%">My</text>
     <text x="2.5%" y="71.8%">postman</text>
     <text x="2.5%" y="73.6%">is</text>
     <text x="2.5%" y="75.4%">grumpy!</text>
     <text x="2.5%" y="77.2%">My</text>
     <text x="2.5%" y="79%">friends</text>
     <text x="2.5%" y="80.8%">are</text>
     <text x="2.5%" y="82.6%">grumpy!</text>
     <text x="2.5%" y="84.4%">My</text>
     <text x="2.5%" y="86.2%">dentist</text>
     <text x="2.5%" y="88%">is</text>
     <text x="2.5%" y="89.8%">grumpy!</text>
     <text x="2.5%" y="91.6%">My</text>
     <text x="2.5%" y="93.4%">doctor</text>
     <text x="2.5%" y="95.2%">is</text>
     <text x="2.5%" y="97%">grumpy!</text>
   </g>
</svg>

It may provide you with a little food for thought. :biggrin:

coothead

2 Likes