css: растягивание svg маски по размеру родительского div

Question

Отрисовываю закладку (см. код)

Необходимо чтобы маска центральной части закладки растягивалась/сужалась до размера родительского элемента (который зависит от размера текста внутри элемента)

Почему-то не выходит, хотя вроде как для этого достаточно использовать clipPathUnits="objectBoundingBox".

Подскажите в чём проблема и как её исправить

    .cover-title {
        display                 :   flex;
        flex-direction          :   row;

        margin                  :   0px;
        padding                 :   0px;

        font-size               :   0px;
    }

    .cover-title-left {
        width                   :   26px;
        height                  :   91px;

        margin                  :   0px;
        padding                 :   0px;

        clip-path               :   url(#left);

        background-color        :   red;
    }

    .cover-title-middle {
        display                 :   flex;
        align-items             :   center;

        /*width                     :   233px;*/
        height                  :   91px;
        
        margin                  :   0px;
        padding                 :   0px;

        color                   :   white;
        font-size               :   38px;
        font-weight             :   400;
        
        white-space             :   nowrap;

        background-color        :   green;
       
        clip-path               :   url(#middle); 

    }

    .cover-title-right {
        width                   :   36px;
        height                  :   91px;

        margin                  :   0px;
        padding                 :   0px;

        background-color        :   blue;

        clip-path               :   url(#right);
    }
    
    .cover-subtitle {
        height                  :   50px;
        
        border-top-right-radius :   10px;
        
        background-color        :   orange;
    }

            <div class="cover">
                <div class='cover-title'>
                    <div class='cover-title-left'></div>
                    <div class='cover-title-middle'>WELCOME HOME</div>
                    <div class='cover-title-right'></div>
                </div>
                <div class='cover-subtitle'></div>
                
            </div>    

                <svg width="0" height="0" viewBox="0 0 25 91" xmlns="http://www.w3.org/2000/svg">
                    <clipPath id='left'>
                        <path d="M25 0.00724123H15.4637C7.00179 -0.251624 1.30391e-05 6.46316 1.17475e-05 14.8371L0 91H25V0.00724123Z" />
                    </clipPath>
                </svg>
    
                <svg width="0" height="0" viewBox="0 0 233 91" xmlns="http://www.w3.org/2000/svg">
                    <clipPath id='middle' clipPathUnits="objectBoundingBox">
                        <path d="M0 0L233 7V91H0V0Z" />
                    </clipPath>
                </svg>
        
                <svg width="0" height="0" viewBox="0 0 36 91" xmlns="http://www.w3.org/2000/svg">
                    <clipPath id='right'>
                        <path d="M0 91H35C28.6455 89.2663 23.9747 83.4607 23.9747 76.5657V22.2468C23.9747 14.1636 17.545 7.54183 9.45371 7.29195L0 7V91Z" />
                    </clipPath>
                </svg>

Answer 1

При использовании clipPathUnits="objectBoundingBox", все координаты должны лежать в интервале от 0 до 1. Для приведения координат можно воспользоваться трансформацией масштабирования, либо конвертированием. Для простых фигур можно использовать polygon(). (Текст в примере можно редактировать.)

.cover-title {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.cover-title-left {
  width: 25px;
  height: 90px;
  margin: 0;
  padding: 0;
  clip-path: url(#left);
  background-color: red;
}

.cover-title-middle {
  display: flex;
  align-items: center;
  /* width: 233px; */
  height: 90px;
  margin: 0px;
  padding: 0px;
  color: white;
  font-size: 38px;
  font-weight: 400;
  white-space: nowrap;
  background-color: green;
  clip-path: url(#middle);
  /* Также можно воспользоваться стандартным CSS-примитивом    */
  /* clip-path: polygon(0 0, 100% 7px, 100% 100%, -100% 100%); */
}

.cover-title-right {
  width: 35px;
  height: 90px;
  margin: 0;
  padding: 0;
  background-color: blue;
  clip-path: url(#right);
}

.cover-subtitle {
  height: 50px;
  border-top-right-radius: 10px;
  background-color: orange;
}

<div class="cover">
  <div class="cover-title">
    <div class="cover-title-left"></div>
    <div class="cover-title-middle" contenteditable>WELCOME HOME</div>
    <div class="cover-title-right"></div>
  </div>
  <div class="cover-subtitle"></div>

</div>

<svg width="0" height="0" viewBox="0 0 25 90" xmlns="http://www.w3.org/2000/svg">
  <clipPath id='left'>
    <path d="M 25 0 H 15 C 7 0 1 6 1 15 L 0 90 H 25 V 0 Z" />
  </clipPath>
</svg>

<svg width="0" height="0" viewBox="0 0 233 90" xmlns="http://www.w3.org/2000/svg">
  <clipPath id='middle' clipPathUnits="objectBoundingBox">
    <path d="M 0 0 L 1 0.078 V 1 H 0 V 0" />
    <!-- или использовать масштабирование -->
    <!-- <path d="M 0 0 L 233 7 V 90 H 0 V 0 Z" transform="scale(0.0045,0.012)"/> -->
  </clipPath>
</svg>

<svg width="0" height="0" viewBox="0 0 35 90" xmlns="http://www.w3.org/2000/svg">
  <clipPath id='right'>
    <path d="M 0 90 H 35 C 30 90 25 83 25 77 V 22 C 25 14 18 8 9 7 L 0 7 V 90 Z" />
  </clipPath>
</svg>

Ответ был подсмотрен здесь.

БЛОГ НА HUSL

css: растягивание svg маски по размеру родительского div

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