Адаптивный SVG-текст

У меня есть SVG на веб-странице, она состоит из изображений + текста.

<object data="/infographic/timeline.svg" type="image/svg+xml">    
  <img src="/infographic/timeline.svg" alt="Timeline">
</object>

Все изображения адаптивны, а текст нет, поэтому текст становится очень, ОЧЕНЬ маленьким.

фрагмент SVG (огромный)

  <defs>
    <style>
      .cls-1 {
        font-size: 60.014px;
      }

  .cls-1, .cls-10 {
    opacity: 0.69;
  }

  .cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
    fill: #ffffff;
  }

  .cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
    text-anchor: middle;
  }

  .cls-1, .cls-3, .cls-6 {
    font-family: "Roboto";
  }

  .cls-2 {
    font-size: 32.014px;
  }

  .cls-3 {
    font-size: 14.089px;
  }

  .cls-3, .cls-6 {
    fill: #db7426;
  }

  .cls-4, .cls-6 {
    font-size: 32px!important;
  }

  .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
    font-family: Roboto;
  }

  .cls-5 {
    font-size: 24px;
  }

  .cls-5, .cls-8, .cls-9 {
    font-weight: 400;
  }

  .cls-6 {
    font-weight: 600;
  }

  .cls-10, .cls-7 {
    font-size: 18.75px;
    font-weight: 300;
  }

  .cls-7 {
    opacity: 0.4;
  }

  .cls-8, .cls-9 {
    font-size: 22px;
  }
 </style>
</defs>

<text id="Who_are_you_what_do_you_do_what_s_your_why_What_s_been_keepi" data-name="Who are you, what do you do, what’s your why? What’s been keepi" class="cls-8" x="397.706" y="535.325">Who are you, what do you do, what’s your why?<tspan x="397.706" dy="26.4">What’s been keeping you lying awake at night. </tspan></text>

Могу ли я каким-либо образом увеличить размер текста по мере уменьшения ширины SVG/экрана?

Любая помощь будет принята с благодарностью.


svg responsive-design responsiveness
person Gaza    schedule 15.12.2015    source источник
comment
Вы пробовали не указывать размер текста в пикселях?   -  person r3mainer    schedule 15.12.2015
comment
у меня есть в CSS, или вы имеете в виду тег ‹text›?   -  person Gaza    schedule 15.12.2015
comment
Обычно текст масштабируется вместе со всем остальным в SVG (пример). Кажется, вы каким-то образом отключили это поведение. Я просто пытаюсь понять, как.   -  person r3mainer    schedule 15.12.2015
comment
если это поможет, SVG находится внизу страницы (длинная инфографика) outhouse.scottishbordersdesign.co .uk/approach, когда вы перемещаете окно браузера, текст становится слишком маленьким для чтения, мне нужно, чтобы размер текста увеличился, или любые другие ваши предложения были бы замечательными.   -  person Gaza    schedule 15.12.2015
comment
Ага, понятно. Вы хотите, чтобы текст оставался разборчивым при уменьшении масштаба SVG. Я не думаю, что это возможно — вы не можете заставить текст переворачиваться внутри SVG. Либо переключитесь на HTML, либо используйте весь SVG в качестве фонового изображения с позицией center top, чтобы нетекстовые области были обрезаны на меньших экранах просмотра.   -  person r3mainer    schedule 16.12.2015

Ответы (2)


arrow_upward
6
arrow_downward

Это невозможно с чистым SVG (по крайней мере, пока). Единственным решением было бы либо:

  1. вставьте SVG и управляйте размером текста с помощью javascript.

  2. встраивайте SVG и управляйте размером текста с помощью медиа-запросов (см. ниже).

  3. Добавьте CSS в SVG и используйте там медиа-запросы (см. ниже).

  4. используйте медиа-запросы для переключения SVG, когда страница становится маленькой

Пример варианта 2: использование медиа-запросов со встроенными SVG

text {
  font-size: 10px;
}

@media (max-width: 400px) {
  text {
    font-size: 20px;
  }
}
<svg viewBox="0 0 100 100" width="100%" height="100%">
  <circle cx="50" cy="50" r="50" fill="orange"/>
  <text x="50" y="60" text-anchor="middle">Testing</text>
</svg>

Пример варианта 3. Использование медиазапросов в CSS в SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
  <style>
    text {
      font-size: 10px;
    }

    @media (max-width: 400px) {
      text {
        font-size: 20px;
      }
    }
  </style>
  <circle cx="50" cy="50" r="50" fill="orange"/>
  <text x="50" y="60" text-anchor="middle">Testing</text>
</svg>
person Paul LeBeau    schedule 16.12.2015
comment
Не мог ли он просто использовать медиа-запросы для увеличения размера шрифта? - person Sam Willis; 16.12.2015
comment
возможна плавная обертка css-tricks.com/svg-text-typographic-designs - person animaacija; 11.04.2017

arrow_upward
1
arrow_downward

Это возможно с помощью элемента svg foreignObject в html-контекст и некоторые настройки viewBow.

В этих демонстрациях текст остается доступным для выбора:

.demo {
  overflow: auto;
  resize: both;
  border:1px black solid;
  width: 230px;
  height: 130px
}

.svgtext {
  font-size: 28rem;
  height:100%;
  width:100%
}
<div class="demo">

  <svg x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="12" y="23" height="100%" width="100%">
      <div class"svgtext">
        Hello world!
       </div>
     </foreignObject>
  </svg>

</div>

Используйте preserveAspectRatio для управления изменением размера:

.demo {
  overflow: auto;
  resize: both;
  border:1px black solid;
  width: 230px;
  height: 130px
}

.svgtext {
  font-size: 28rem;
  height:100%;
  width:100%
}
<div class="demo">

  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="12" y="23" height="100%" width="100%">
      <div class"svgtext">
        Hello world!
       </div>
     </foreignObject>
  </svg>

</div>

person NVRM    schedule 16.01.2020