Как сделать svg квадраты отзывчивыми?

Question

Как заставить эти квадраты реагировать на родительский элемент?

   <svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect height="50" width="50" y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="0" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

Answer 1

Вы должны использовать viewBox для "0 0 100 100".

Шкала SVG

Вот решение:

 <div style="width: 400px; height: 400px;border:1px solid red;">

           <svg id="square" viewBox="0 0 100 100">
                <g>
                    <rect height="50" width="50" y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
                    <rect height="50" width="50" y="50" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
                    <rect height="50" width="50" y="0" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
                    <rect height="50" width="50" y="50" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
                </g>
  </svg>
</div>

Answer 2

Если вам нравится создавать адаптивный элемент, есть очень хороший трюк. Вы можете адаптировать его к любому желаемому соотношению с помощью padding-top:100%; и получите соотношение 1: 1.

.ratio{
  width: 50%;
  position: relative;
  border: 2px solid #ff0000;
}
.ratio:before{
  content: '\0020';
  display: block;
  padding-top: 100%;
}
.box{
    border: 1px solid green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 }

<div class="ratio">
  <div class="box"></div>
</div>

Answer 3

Вы можете добиться того же, используя CSS и фон, тогда вам будет легко изменить размер:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background:
    linear-gradient(gray,gray),
    linear-gradient(gray,gray),
    #B0b0b0;
  background-size:100% 2px,2px 100%;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid gray;
}

<div class="box">

</div>
<div class="box" style="width:200px;height:200px;">

</div>

С SVG вы можете рассмотреть процентное значение:

rect {
  width: 50%;
  height: 50%;
}

<svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

<svg style="width: 200px; height: 200px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>