SVG - адаптировать ширину по контенту

Question

<svg style="display:block;background: rgb(0 0 0);width: clamp(170px,20%, 300px);" viewBox="0 0 103 36">
    <text x="10" y="22" fill='#fff'>Автомобиль</text>
</svg>
<br><br>
<svg style="display:block;background: rgb(0 0 0);width: clamp(170px,20%, 300px);" viewBox="0 0 103 36">
    <text x="10" y="22" fill='#fff'>xe</text>
 </svg>

Столкнулся с такой задачей, что к примере если изначально подгонять svg под конкретную фразу. То все ок, но вот к примеру на въетнамском автомобиль - хе

Собственно как быть, чтобы ширина адаптировалась по ширине контента. А высота была динамичной, в процентах. И в целом как лучше поступать в данных ситуациях

В примере нету, а так, перед текстом вставлена еще иконка...

Один из ответов, что я пытаюсь сделать. Вставить иконку path, так чтобы при изменении ширины, все элементы масштабировались.

    .one {
      color: white;
     background: black;
     width: fit-content;
      overflow: auto;
      margin:5px;
padding:3px;
    }

#mutes {
    cursor: pointer;
    z-index: 10;
    fill: #fff;
    background: rgb(0 0 0);
    font-size: 16px;
    width: clamp(170px,20%, 300px);
    border-radius: 5px;
}

<svg viewBox="0 0 170 36" xmlns="http://www.w3.org/2000/svg" style="width: 200px;">      
<path d="m 7.3011971,22.605734 h 4.6677539 l 5.834691,6.372921 V 8.585308 l -5.834691,6.372921 H 7.3011971 Z M 20.137518,13.683645 v 10.196673 c 1.72707,-0.866717 2.917346,-2.842322 2.917346,-5.098337 0,-2.217776 -1.190276,-4.155143 -2.917346,-5.098336 z m 0,-3.454123 c 3.372452,1.096143 5.834692,4.512027 5.834692,8.552459 0,4.040433 -2.46224,7.456318 -5.834692,8.55246 v 2.625644 c 4.679423,-1.159872 8.168568,-5.722883 8.168568,-11.178104 0,-5.45522 -3.489145,-10.0182305 -8.168568,-11.1781031 z"></path>
<foreignObject style="width: 100%; height: 100%;">   
       <div class="one" xmlns="http://www.w3.org/1999/xhtml">Звук</div>
  </foreignObject>
</svg>

Как выровнять, сделать элементы блочным и допустимо ли вставлять элемент path в блок foreignObject?

Answer 1

<svg style="display:block;background: rgb(0 0 0);" viewBox="0 0 103 36">
    <text x="10" y="22" fill='#fff'>Автомобиль</text>
</svg>
<br><br>
<svg style="display:block;background: rgb(0 0 0);" viewBox="0 0 103 36">
    <text x="10" y="22" fill='#fff'>xe</text>
 </svg>

Уберите width: clamp(170px,20%, 300px); из html и прописывайте в CSS width: clamp(170px,20%, 300px); height: auto;

Answer 2

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .one {
      color: white;
     background: black;
     width: fit-content;
      overflow: auto;
      margin:5px;
padding:3px;
    }
  </style>

       <foreignObject x="20" y="20" width="160" height="160">
       <div class="one" xmlns="http://www.w3.org/1999/xhtml">
    ? Автомобиль
    </div>
       <div class="one" xmlns="http://www.w3.org/1999/xhtml">
    &#9742; xe
    </div>
   <div class="one" xmlns="http://www.w3.org/1999/xhtml">
    ? Рыба
    </div>
 <div class="one" xmlns="http://www.w3.org/1999/xhtml">
    ✈ Самолет
    </div>
  </foreignObject>
</svg>

БЛОГ НА HUSL

SVG - адаптировать ширину по контенту

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