Обтекание текста с текс-якоря: конец

Так у меня есть этот HTML/CSS сниппет:Обтекание текста с текс-якоря: конец

HTML:

<svg class="container"> 
    <g> 
    <svg class="amount-container"> 
     <text class="amount" >500</text> 
    </svg> 
    </g> 
</svg>

CSS:

.amount { 
    writing-mode: tb; 
    text-anchor: end; 
} 

.amount-container { 
    overflow: visible; 
} 

.container { 
    background: white; 
    margin: 200px; 
    overflow: visible; 
}

Demo in Jsfiddle

Проблема Я хотите, чтобы контейнер svg ('.container') увеличивал его высоту, чтобы обернуть текст ('.amount'). Есть идеи, как это исправить? Я не могу назначить фиксированную верхнюю часть, так как длина текста неизвестна заранее.

источник

2016-04-26 Enrique Marcos

Я не уверен, что понимаю. В jsFiddle вы смещаете позицию 'y' в тексте. Разве вы не можете просто дать ему положение 'x' и' y', чтобы держать его внутри контейнера? EG: http://jsfiddle.net/jy2p5ek0/1/ – Moob

Это не «контейнер» в SVG ... это, по сути, «холст/монтажная доска», в которую вы помещаете вещи. Элементы внутри SVG не могут влиять на размер SVG. –

Вы не можете сделать это автоматически. SVG не имеет автоматической компоновки, такой как HTML. Вы должны установить его ширину и высоту, аналогично элементу <canvas>.

Ваш единственный вариант - использовать Javascript для определения размера текста (путем вызова getBBox() на текстовом элементе) и изменения размера SVG для соответствия.

источник

2016-04-26 18:43:43

Вы можете просто добавить атрибуты x и y к вашему текстовому элементу, чтобы изменить позицию. Вы могли бы, например, что-то вроде этого:

<text class="amount" x=10 y=5>5000</text>

И все должно работать

источник

2016-04-26 09:43:45 Icarus

Для конкретного текста да, он будет работать; но нет для общего случая. –

Обтекание текста с текс-якоря: конец

ответ

Смежные вопросы