Растянуть дочерний элемент во всю ширину и высоту SVG

Question

    .cn {
      height: 300px;
      width: 50%;
      position: relative;
      background: red;
    }
    svg {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }

   <div class='cn'>
    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 36 36" >  
      <path id="trace" fill="black" troke="black" d="M 36.004728,34.368456 C 36.004047,22.917009 36.002294,11.465562 36.001484,0.01411642 24.332811,0.01342352 12.664135,0.01166509 0.99546196,0.01092334 0.438765,7.0125074 -0.2708987,14.034586 0.12704466,21.065393 c 0.19483942,4.981261 0.49563668,9.955936 0.77255551,14.93282 11.70170883,0.0013 23.40341983,0.0051 35.10512783,0.0065 0,-0.545384 0,-1.090766 0,-1.636148 z" /> 
    </svg>
    </div>

Svg имеет ширину в 50%, а высота блока 300px. В данном примере, получается что path принял максимальную ширину. А вот до высоты блока не дотянул, каким образом делается так. Чтобы path принимал ширину и высоту родителя?

Answer 1

Вопрос по масштабированию и позиционированию SVG внутри HTML, на мой взгляд, лучше всего начать решать с выяснения физических размеров ( размеров ширины и высоты, как нарисована фигуры в векторном редакторе)

Для этого используется метод JS getBBox()

* {padding:0;margin:0;}
  .cn {
    width:20vw;
    height:20vh;
    background-color:gold;
   }

<div class='cn'>
        <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 36 36" >  
          <path id="trace" fill="black"  d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" /> 
        </svg>
        </div>
        
        <script>
         console.log(trace.getBBox())
        </script>

Физические размеры svg: width ~= 36px height~=36px

Так как aspectRatio=1:1 (соотношение размеров сторон) одинаковое у svg и родительского контейнера, то svg полностью занимает родительский контейнер.
Размеры родительского контейнера указаны в относительных единицах окна браузера vw, vh поэтому при разрешении 1400х1050 ширина svg фигуры на экране будет 1400 х 0.2 = 280px

Увеличим размеры родительского контейнера .cn: width="40vw;" height="40vh"

* {padding:0;margin:0;}
  .cn {
    width:40vw;
    height:40vh;
    background-color:gold;
   }

<div class='cn'>
        <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 36 36" >  
          <path id="trace" fill="black"  d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" /> 
        </svg>
        </div>
        
        <script>
         console.log(trace.getBBox())
        </script>

Обратите внимание, что SVG опять полностью заполнил на дисплее родительский контейнер, который увеличился в 2 раза, но физические размеры svg остались те же - 36х36px

Решение:

как выполнить, чтобы был во всю высоту независимо от ширины?

Svg имеет ширину в 50%, а высота блока 300px.

Устанавливаем:

.cn {
   display:flex;
   justify-content:flex-end; для размещения svg в конце широкого контейнера
    width:50vw;   регулировка ширины родительского контейнера
    background-color:gold;
    max-height:300px; фиксированная высота родительского блока
    overflow:hidden;  
    }

* {padding:0;margin:0;}
  .cn {
   display:flex;
   justify-content:flex-end;
    width:50vw;
    
    background-color:gold;
    max-height:300px;
    overflow:hidden;
    }
    svg {
    max-height:300px;
    }

<div class='cn'>
        <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 36 36" >  
          <path id="trace" fill="black"  d="M36.2-.2H1C.5 6.8-.3 14 0 21.1c.2 5 .7 10 1 14.9h35Z" /> 
        </svg>
</div>

БЛОГ НА HUSL

Растянуть дочерний элемент во всю ширину и высоту SVG

Ответы (1 шт):

Решение: