4

Растягивание самого SVG-элемента никак не помогает. Также пробовал добавить viewBox='50% 50% 100% 100%' и это не привело ни к каким результатам.

.wrapper {
  width: 600px;
  background-color: blue;
  height: 600px;
}

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

tspan {
  font-size: 30px;
  font-family: Helvetica;
}
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text>
      <tspan x="0" y="0">The</tspan>
      <tspan x="51.694" y="0"letter-spacing="-1"> </tspan>
      <tspan x="58.408" y="0">chair</tspan>
      <tspan x="123.432" y="0" letter-spacing="-1"> </tspan>
      <tspan x="130.146" y="0">has</tspan>
      <tspan x="178.515" y="0" letter-spacing="-1"> </tspan>
      <tspan x="185.229" y="0">been</tspan>
      <tspan x="251.967" y="0" letter-spacing="-1"> </tspan>
      <tspan x="258.68" y="0">used</tspan>
      <tspan x="323.734" y="0" letter-spacing="-1"> </tspan>
      <tspan x="330.448" y="0">since </tspan>
      <tspan x="0" y="13">antiquity,</tspan>
      <tspan x="120.073" y="13" letter-spacing="10"> </tspan>
      <tspan x="139.05" y="13">although</tspan>
      <tspan x="254.158" y="13" letter-spacing="10"> </tspan>
      <tspan x="273.135" y="13">for</tspan>
      <tspan x="308.145" y="13" letter-spacing="10"> </tspan>
      <tspan x="327.122" y="13">many </tspan>
      <tspan x="0" y="26">centuries</tspan>
      <tspan x="121.729" y="26"> </tspan>
      <tspan x="129.801" y="26">it</tspan>
      <tspan x="144.801" y="26"> </tspan>
      <tspan x="152.874" y="26">was</tspan>
      <tspan x="206.224" y="26"> </tspan>
      <tspan x="214.297" y="26">a</tspan>
      <tspan x="230.981" y="26"> </tspan>
      <tspan x="239.054" y="26">symbolic</tspan>
      <tspan x="355.744" y="26"> </tspan>
      <tspan x="363.817" y="26">ar</tspan>
      <tspan x="390.491" y="26">-</tspan>
      <tspan x="0" y="39">ticle</tspan>
      <tspan x="53.35" y="39"> </tspan>
      <tspan x="61.736" y="39">of</tspan>
      <tspan x="86.755" y="39"> </tspan>
      <tspan x="95.142" y="39">state</tspan>
      <tspan x="160.181" y="39"> </tspan>
      <tspan x="168.567" y="39">and</tspan>
      <tspan x="218.621" y="39"> </tspan>
      <tspan x="227.007" y="39">dignity</tspan>
      <tspan x="313.726" y="39"></tspan>
      <tspan x="322.112" y="39">rather</tspan>
      <tspan x="0" y="52">than</tspan>
    </text>
  </svg>
</div>

2
  • Canvas ? (JavaScript) выводить с его пощью отображение svg в броузере.
    – NewView
    31 мая 2018 в 21:13
  • Подробнее про Canvas тут и тут
    – NewView
    31 мая 2018 в 21:20

2 ответа 2

7

Растягивание текста делается с помощью атрибутов textLength и lengthAdjust.

.wrapper {
  width: 600px;
  background-color: blue;
  height: 180px;
}

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

text {
  font-size: 30px;
  font-family: Helvetica;
}
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x="10" y="50" textLength="580" lengthAdjust="spacingAndGlyphs">antiquity, although for</text>
    <text x="10" y="80" textLength="580" lengthAdjust="spacingAndGlyphs">many centuries it was a</text>
    <text x="10" y="110" textLength="580" lengthAdjust="spacingAndGlyphs">symbolic article of state</text>
    <text x="10" y="140" textLength="580" lengthAdjust="spacingAndGlyphs">and dignity rather than</text>
  </svg>
</div>

Смотрите также: Как растянуть текст по ширине блока div, где присутствует решение через JS/JQ.

5
  • Поправил снова отступы, если вы не против
    – Arthur
    1 июн 2018 в 18:10
  • @Arthur, как вы узнаёте о новых ответах?
    – Bharatha
    1 июн 2018 в 18:27
  • " It's magic=) ". Сидел и рассматривал данный вопрос, затем заметил повторное обновление вашего ответа, вскоре снова исправил отступы. Увы SVG не приводится в порядок, может быть это исправят, частенько приходится править.
    – Arthur
    1 июн 2018 в 18:38
  • @Arthur, решил заодно и подобный вопрос: Как растянуть текст по ширине блока div, где присутствует решение через JS/JQ.
    – Bharatha
    1 июн 2018 в 21:20
  • Уже бегу править:D
    – Arthur
    2 июн 2018 в 7:15
2

Не вполне уверен, что понял вопрос. Такого решения будет достаточно?

setTimeout(function() {
  $('svg').each(function() {
    var svg = $(this);
    var text = svg.find('text');
    var bbox = text.get(0).getBBox(); 

    svg.get(0).setAttribute('viewBox', 
                            [bbox.x,
                             bbox.y,
                             bbox.width,
                             bbox.height].join(' '));
  });
}, 100);
.wrapper {
  width: 600px;
  background-color: blue;
  height: 600px;
}

svg {
  display: block;
  width: 100%;
  max-height: 100%;
}

tspan {
  font-size: 30px;
  font-family: Helvetica;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text>
      <tspan x="0" y="0">The</tspan>
      <tspan x="51.694" y="0"letter-spacing="-1"> </tspan>
      <tspan x="58.408" y="0">chair</tspan>
      <tspan x="123.432" y="0" letter-spacing="-1"> </tspan>
      <tspan x="130.146" y="0">has</tspan>
      <tspan x="178.515" y="0" letter-spacing="-1"> </tspan>
      <tspan x="185.229" y="0">been</tspan>
      <tspan x="251.967" y="0" letter-spacing="-1"> </tspan>
      <tspan x="258.68" y="0">used</tspan>
      <tspan x="323.734" y="0" letter-spacing="-1"> </tspan>
      <tspan x="330.448" y="0">since </tspan>
      <tspan x="0" y="13">antiquity,</tspan>
      <tspan x="120.073" y="13" letter-spacing="10"> </tspan>
      <tspan x="139.05" y="13">although</tspan>
      <tspan x="254.158" y="13" letter-spacing="10"> </tspan>
      <tspan x="273.135" y="13">for</tspan>
      <tspan x="308.145" y="13" letter-spacing="10"> </tspan>
      <tspan x="327.122" y="13">many </tspan>
      <tspan x="0" y="26">centuries</tspan>
      <tspan x="121.729" y="26"> </tspan>
      <tspan x="129.801" y="26">it</tspan>
      <tspan x="144.801" y="26"> </tspan>
      <tspan x="152.874" y="26">was</tspan>
      <tspan x="206.224" y="26"> </tspan>
      <tspan x="214.297" y="26">a</tspan>
      <tspan x="230.981" y="26"> </tspan>
      <tspan x="239.054" y="26">symbolic</tspan>
      <tspan x="355.744" y="26"> </tspan>
      <tspan x="363.817" y="26">ar</tspan>
      <tspan x="390.491" y="26">-</tspan>
      <tspan x="0" y="39">ticle</tspan>
      <tspan x="53.35" y="39"> </tspan>
      <tspan x="61.736" y="39">of</tspan>
      <tspan x="86.755" y="39"> </tspan>
      <tspan x="95.142" y="39">state</tspan>
      <tspan x="160.181" y="39"> </tspan>
      <tspan x="168.567" y="39">and</tspan>
      <tspan x="218.621" y="39"> </tspan>
      <tspan x="227.007" y="39">dignity</tspan>
      <tspan x="313.726" y="39"></tspan>
      <tspan x="322.112" y="39">rather</tspan>
      <tspan x="0" y="52">than</tspan>
    </text>
  </svg>
</div>

2
  • Да, это решение, но есть ли возможность решить без JavaScript?
    – uzi_no_uzi
    1 июн 2018 в 5:28
  • Возможность есть, уберите скрипт и добавьте в svg атрибут viewbox="0 -27 408 85". Но есть один нюанс, чтобы быстро узнать параметры для viewbox, я получаю boundingbox элемента с помощью jQ. Другого способа, к сожалению, не знаю.
    – Sjeurt
    1 июн 2018 в 6:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.