Блог

Довольно легко создать текст с разными размерами шрифта для разных слов в HTML. Но как насчет <text> в svg?

Я думаю, это довольно хорошо объясняет мой вопрос:https://jsfiddle.net/4atoctra/1 /

Все здесь, ниже:

 <div>
This is a text, and you can have <span style="font-size:25px">big</span> and <span style="font-size:11px">small</span> sizes easily inline.
</div>

<div style="margin-top:50px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="360px" height="126px" viewBox="0 0 360 126">
<text><tspan x="150" text-anchor="middle" y="10" font-family="Tahoma" font-weight="bold" font-size="11" fill="#003863" xml:space="preserve">What about this in a amp;<svgamp;>?</tspan></text></svg>
</div>
  

Вы можете просто изменить размер шрифта для каждого элемента tspan?

 <svg viewBox="0 0 500 100" width="500px">
  <text x="0" y="50" font-size="20">It's not <tspan font-size="30">that hard</tspan><tspan font-size="40"> to change size?</tspan></text>
</svg>  

Вы можете использовать <foreignObject> для вставки HTML-разметки в документ SVG:

 <svg width="220" height="120" viewBox="0 0 220 120">
  <rect x="10" y="10" width="200" height="100" fill="#ff9" stroke="none" />
  <foreignObject x="15" y="15" width="190" height="90">
    <div xmlns="http://www.w3.org/1999/xhtml" style="width:190px; height:90px; overflow-y:auto">This is a text, and you can have <span style="font-size:25px">big</span> and <span style="font-size:11px">small</span> sizes easily inline.
</div>
  </foreignObject>
</svg>