Сделать элементы блочными

Question

 .text {
    background: black;
    color: white;
    margin-left: auto;
    width: fit-content;
    font-size: 14px;
    padding: 10px;
    white-space: nowrap;
}

foreignObject {
    height: 100%;
    width: 100%;
}

<svg viewBox="0 0 260 36">
  <foreignObject>
    <div>Текст</div>
  </foreignObject>
  <image xlink:href="https://i.stack.imgur.com/N1DGN.png" height="100%"></image>
</svg>

Возможно сделать текст и изображение блочными? Так чтобы текст был в теге foreignObject, а изображение за ним, не внутри?

Answer 1

Может поменять элементы местами? ヾ(^▽^*)))

foreignObject {
  height: 100%;
  width: 100%;
}

<svg viewBox="0 0 260 36">
  <image xlink:href="https://i.stack.imgur.com/N1DGN.png" height="100%"></image>
  <foreignObject>
    <div>Текст</div>
  </foreignObject>
</svg>

Answer 2

тексту добавь z-index: 50; position: relative;

Answer 3

.text, foreignObject {
   display: block;
}

БЛОГ НА HUSL

Сделать элементы блочными

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