enter image description here

मैं यही होना चाहता हूं।

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>

इन बक्सों को एक साथ कैसे खींचे। पहली तस्वीर जो वास्तव में मैंने की थी। दूसरी छवि वह प्रेरणादायक छवि है जिसका मैं अनुकरण करना चाहता हूं। .

0
anony 25 फरवरी 2020, 16:20
उन तीन एसवीजी को एक साथ रखने से आपको वांछित परिणाम नहीं मिलेगा। यह स्पष्ट नहीं है कि आप क्या करने की कोशिश कर रहे हैं।
 – 
Paulie_D
25 फरवरी 2020, 16:25
कई svg तत्वों का उपयोग करने के बजाय मैं केवल एक का उपयोग करूंगा।
 – 
enxaneta
25 फरवरी 2020, 16:35
Enxaneta कैसे करना है सर?
 – 
anony
25 फरवरी 2020, 16:50
Paulie_D कई svg के बजाय एक svg कैसे बनाएं?
 – 
anony
25 फरवरी 2020, 16:57

4 जवाब

आपके <svg> तत्वों में एक निश्चित चौड़ाई विशेषता सेट है, जिसमें svg सामग्री की तुलना में एक व्यापक कंटेनर है।

width: auto; सेट करना और ऊंचाई को स्वचालित रूप से अधिकतम तक विस्तारित करने की अनुमति देने से ये बेहतर तरीके से पंक्तिबद्ध हो जाएंगे।

.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>
2
Jeremy Harris 25 फरवरी 2020, 16:29

आप width: auto को .incisor-group कक्षा में रख सकते हैं

0
Duy Tran 25 फरवरी 2020, 16:24

इस तरह मैं इसे करूँगा: आपके पास incenders, molars और premolars हैं। आपको उन्हें कई बार दोहराना होगा। इसलिए मैं प्रत्येक के लिए एक समूह बनाता हूं और उसे एक <defs> तत्व में रखता हूं। प्रत्येक समूह की एक आईडी होती है और आप इसका उपयोग <use> तत्व के साथ कर सकते हैं। <use> तत्व के बारे में अच्छी बात यह है कि आप इसे एक स्थिति (x, y) दे सकते हैं और जहां भी आपको आवश्यकता हो वहां रख सकते हैं।

इसके अलावा मैंने यह सोचकर बहुभुजों को <defs> में डाल दिया है कि लाल धब्बों को चिह्नित करने के लिए शायद आपको बाद में उनकी आवश्यकता होगी (जैसा कि आपके पिछले प्रश्न में है)

अवलोकन: एसवीजी के साथ बिल्कुल अन्य डीओएम तत्वों की तरह आपको id अद्वितीय रखना होगा।

मुझे उम्मीद है यह मदद करेगा।

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>
0
enxaneta 25 फरवरी 2020, 18:27

सभी svg टैग से चौड़ाई विशेषता हटाएं

.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>
-1
iman madani 25 फरवरी 2020, 16:30