SVG 响应文本 [英] SVG Responsive Text

问题描述

我在网页中有一个 SVG，它由图像 + 文本组成

I have an SVG within a web page, it consists of images + text

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

所有的图像都是响应式的，但文本不是，所以文本变得非常非常小.

All the images are responsive, but the text isn't, so the text becomes really, REALLY small.

SVG 片段(其庞大的)

snippet of SVG (its massive)

  <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 是不可能的(至少现在还没有).唯一的解决方案是:

It's not possible with pure SVG (at least not yet). The only solution would be to either:

1. 内联 SVG 并使用 javascript 操纵文本的大小.

1. inline the SVG and manipulate the size of the text with javascript.

内联 SVG 并使用媒体查询控制文本的大小(见下文).

inline the SVG and control the size of the text with media queries (see below).

将 CSS 添加到 SVG 并在那里使用媒体查询(见下文).

Add CSS to the SVG and use media queries there (see below).

当页面变小时使用媒体查询切换 SVG

use media queries to switch SVGs when the page gets small

选项 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 的示例:在 SVG 中使用 CSS 中的媒体查询

<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>

这篇关于SVG 响应文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！