Рассмотрите приведенный ниже код. Могу ли я сделать два встроенных svg подходящим для них текстовым контентом? То есть «Teststring. Lorem». должен быть длиннее, а «foo» короче. Мне нужно два идентичных svg с текстом контента, являющимся единственной разницей. В настоящее время они имеют статическую ширину 50 пикселей.inline svg: размер изображения по размеру соответствует его содержимому

Я знаю, что я мог легко достичь этого через HTML + CSS, но в моем сценарии реального мира мне нужна анимация SMIL за текстом, и это самый простой способ сделать это. У меня уже есть (более сложные) альтернативы, так что это не то, что я хочу. Я просто хочу знать, возможно ли это, и если да, то как. Таким образом, «он не может работать вообще, попробуйте что-то другое», будет правильным ответом. (Хотя это и не то, что я надеяться.)

<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <foreignObject x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t Teststring. Lorem. 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg><br> 
 

 
<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <foreignObject x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t foo 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg>

2016-12-20 Scindix

Я не уверен, если следующий правильный способ сделать это, но это работает.

Объяснение раствора

текст внутри SVG заворачивают в тег диапазона. В событии onload ширина тега svg устанавливается на ширину этого элемента span, который измеряется через javascript. К сожалению, вам нужно установить индивидуальный идентификатор для тега svg и соответствующим образом скорректировать строку идентификатора в первой строке кода javascript.

Установка новой ширины

Кроме того, необходимо установить новую ширину для всех соответствующих элементов в SVG. Что может стать немного уродливым, если у вас много элементов. Возможным ярлыком может быть элемент группы, с помощью которого преобразуется атрибут преобразования. Это позволит масштабировать контент группы до нужного размера при сохранении свойств. Что-то вроде следующего:

//javascript 
thisSvg.getElementsByClassName('group')[0].setAttribute(
    'transform', 'scale('+textWidth/50+')'); 

<!--svg--> 
<g class="group"> 
    <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
    <rect x="0" y="0" width="25" height="20" fill="rgba(1,0,0,.3)"></rect> 
</g>

Фактическое решение

<svg id="custom-id-1" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload=" 
 
    var thisSvg = document.getElementById('custom-id-1'); 
 
    var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect(); 
 
    var textWidth = box.right-box.left; 
 
    thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20'); 
 
    thisSvg.setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth); 
 
"> 
 
\t <foreignObject class="foreign" x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t <span class="text" style="white-space:nowrap">Teststring. Lorem.</span> 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg><br> 
 

 
<svg id="custom-id-2" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload=" 
 
    var thisSvg = document.getElementById('custom-id-2'); 
 
    var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect(); 
 
    var textWidth = box.right-box.left; 
 
    thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20'); 
 
    thisSvg.setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth); 
 
"> 
 
\t <foreignObject class="foreign" x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t <span class="text" style="white-space:nowrap">foo</span> 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg>

источник

2016-12-21 01:59:28 Scindix

inline svg: размер изображения по размеру соответствует его содержимому

ответ

Объяснение раствора

Установка новой ширины

Фактическое решение

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