html – how to pull these box together-ThrowExceptions

Exception or error:

enter image description here

This is what I want to happen.

enter image description here

	.incisor-group{
		height: 50px;
	}
 <svg  class="incisor-group"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 1 -->
        <g id="incisor-group">
            <rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
            <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />    
            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
            <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
            <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
        </g>
    </svg>
    <svg class="incisor-group"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 8 -->
        <g id="molar-group" class="molar">
            <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
            <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
    
            <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
            <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />
    
            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />
    
            <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
            <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />
    
            <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        </g>
    </svg>
    <svg class="incisor-group"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 5 -->
        <g id="premolar-group">
            <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
            <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
            <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
            <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        </g>
    </svg>

how to pull these boxes together. The first picture the actually I did. The second image is the inspirational image I want to imitate………………………………….

How to solve:

Your <svg> elements have a fixed width attribute set on them have a wider container than the svg content within.

Setting width: auto; and allowing the height to expand automatically up to a maximum will get these lined up better.

.incisor-group {
   width: auto;
   max-height: 50px;
}
<svg  class="incisor-group"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 1 -->
    <g id="incisor-group">
        <rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />    
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
    </g>
</svg>
<svg class="incisor-group"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

        <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
        <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

        <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
        <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg>
<svg class="incisor-group"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 5 -->
    <g id="premolar-group">
        <rect x="75" y="75" stroke="black" id="occlusal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
        <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 75 75 75" fill="white" />
        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 225 225 75" fill="white" />
        <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 225 225 225" fill="white" />
        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg>

###

you can put width: auto to .incisor-group class

###

delete width attribute from all svg tag

.incisor-group{
  height: 50px;
}
<svg  class="incisor-group"
      xmlns="http://www.w3.org/2000/svg"
      style="margin: 2px"
      xmlns:xlink="http://www.w3.org/1999/xlink"  height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
  <!-- upper right 1 -->
  <g id="incisor-group">
    <rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
    <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />
    <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
    <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
    <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
  </g>
</svg>
<svg  class="incisor-group"
      xmlns="http://www.w3.org/2000/svg"
      style="margin: 2px"
      xmlns:xlink="http://www.w3.org/1999/xlink"  height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
  <!-- upper right 1 -->
  <g id="incisor-group">
    <rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
    <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />
    <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
    <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
    <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
  </g>
</svg>
<svg  class="incisor-group"
      xmlns="http://www.w3.org/2000/svg"
      style="margin: 2px"
      xmlns:xlink="http://www.w3.org/1999/xlink"  height="300px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
  <!-- upper right 1 -->
  <g id="incisor-group">
    <rect x="75" y="75" stroke="black" id="incisal" style="stroke-width: 5px;" width="150" height="150" fill="white"/>
    <polygon stroke="black" id="buccal" style="stroke-width: 5px;" points="0 0 300 0 225 112.5 75 112.5" fill="white" />
    <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="300 0 300 300 225 187.5 226 112.5" fill="white" />
    <polygon stroke="black" id="palatal" style="stroke-width: 5px;" points="300 300 0 300 75 187.5 225 187.5" fill="white" />
    <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 112.5 75 187.5" fill="white" />
  </g>
</svg>

###

This is how I would do it: You have incisors, molars and premolars. You will need to repeat those several times. So I build a group for each and put it in a <defs> element. Each group has an id and you can use it with a <use> element.
The nice thing about the <use> element is that you can give it a position (x, y) and put it wherever you need.

Also I’ve putted the polygons in the <defs> thinking that maybe you will need those later in order to mark the red spots (as in your previous question)

Observation: with svg exactly like with other DOM elements you have to keep the ids uniques.

I hope it helps.

svg {
  border: solid;
}
svg polygon {
  stroke-width: 5px;
  stroke: black;
  fill: white;
  stroke-linejoin: round;
}
<svg viewBox="-10 -10 1040 320">
   <defs>
        <rect id="incisal" width="150" height="150" />
        <polygon id="buccal"  points="0 0 300 0 225 112.5 75 112.5" />    
        <polygon id="mesial"  points="300 0 300 300 225 187.5 226 112.5" />
        <polygon id="palatal" points="300 300 0 300 75 187.5 225 187.5"  />
        <polygon id="distal"  points="0 300 0 0 75 112.5 75 187.5"  />
        <rect id="disto-occlusal" width="125" height="150" />
        <rect id="mesio-occlusal" width="125" height="150" />
        <polygon id="disto-buccal" points="0 0 200 0 200 75 75 75" />
        <polygon id="mesio-buccal" points="200 0 400 0 325 75 200 75" />
        <polygon id="disto-palatal"  points="200 300 0 300 75 225 200 225" />
        <polygon id="mesio-palatal"  points="400 300 200 300 200 225 325 225" />
     
        <polygon id="distal_1" points="0 300 0 0 75 75 75 225" />
        <polygon id="mesial_1" points="400 0 400 300 325 225 325 75" />

        <rect id="disto-occlusal" width="125" height="150" />
        <rect id="mesio-occlusal" width="125" height="150" />
     
     
        <polygon id="buccal2"  points="0 0 300 0 225 75 75 75" />
        <polygon id="mesial2"  points="300 0 300 300 225 225 225 75"  />
        <polygon id="palatal2" points="300 300 0 300 75 225 225 225"  />
        <polygon id="distal2"  points="0 300 0 0 75 75 75 225"  />
     
     <g id="incisor-group">        
        <use xlink:href="#buccal" />    
        <use xlink:href="#mesial" />
        <use xlink:href="#palatal"  />
        <use xlink:href="#distal" />
    </g>
     
     <g id="molar-group" class="molar">
        <use xlink:href="#disto-buccal"  />
        <use xlink:href="#mesio-buccal"  />
        <use xlink:href="#mesial_1" />
        <use xlink:href="#mesio-palatal"  />
        <use xlink:href="#disto-palatal" />
        <use xlink:href="#distal_1" />
     </g>
     
     
     
     <g id="premolar-group">       
        <use xlink:href="#buccal2"  points="0 0 300 0 225 75 75 75" />
        <use xlink:href="#mesial2"  points="300 0 300 300 225 225 225 75"  />
        <use xlink:href="#palatal2" points="300 300 0 300 75 225 225 225"  />
        <use xlink:href="#distal2"  points="0 300 0 0 75 75 75 225"  />
    </g>
   </defs>
   
   
   
   
    <use xlink:href="#incisor-group"/>
    <use x="310" xlink:href="#molar-group"/>
    <use x="720" xlink:href="#premolar-group"/>

   
   </svg>

Leave a Reply

Your email address will not be published. Required fields are marked *