SVG响应文本

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

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

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

SVG片段（它的巨大）

.cls-1{
字体大小：60.014px；
}
.cls-1、.cls-10{
不透明度：0.69；
}
.cls-1、.cls-10、.cls-4、.cls-5、.cls-7、.cls-8、.cls-9{
填充：#ffffff；
}
.cls-1、.cls-10、.cls-3、.cls-4、.cls-5、.cls-6、.cls-7、.cls-9{
文本锚定：中间；
}
.cls-1、.cls-3、.cls-6{
字体系列：“机器人”；
}
.cls-2{
字号：32.014px；
}
.cls-3{
字号：14.089px；
}
.cls-3、.cls-6{
填充：#db7426；
}
.cls-4、.cls-6{
字体大小：32px！重要；
}
.cls-10、.cls-4、.cls-5、.cls-7、.cls-8、.cls-9{
字体系列：Roboto；
}
.cls-5{
字体大小：24px；
}
.cls-5、.cls-8、.cls-9{
字体大小：400；
}
.cls-6{
字号：600；
}
.cls-10、.cls-7{
字号：18.75px；
字体大小：300；
}
.cls-7{
不透明度：0.4；
}
.cls-8、.cls-9{
字体大小：22px；
}
你是谁，你做什么，为什么？是什么让你晚上睡不着。

当SVG/屏幕宽度变小时，我是否可以使文本大小增加？

---

任何帮助都将不胜感激。

使用纯SVG是不可能的（至少现在还不可能）。唯一的解决办法是：

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

内联SVG并通过媒体查询控制文本的大小（见下文）

将CSS添加到SVG中，并在那里使用媒体查询（见下文）

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

选项2的示例：使用带有内联SVG的媒体查询

文本{
字体大小：10px；
}
@介质（最大宽度：400px）{
正文{
字体大小：20px；
}
}

测试

这可以在html上下文中使用svg元素，并对viewBow进行一些调整

在此演示中，文本保持可选状态：

.demo{
溢出：自动；
调整大小：两者；
边框：1px黑色实心；
宽度：230px；
高度：130像素
}
.svgtext{
字号：28rem；
身高：100%；
宽度：100%
}

你好，世界！

您是否尝试过不以像素为单位指定文本大小？我在CSS中有，或者您的意思是在标记上？通常，文本将与SVG中的其他内容一起缩放（）。你似乎在某种程度上妨碍了这种行为。我只是想弄清楚怎么做。如果有帮助的话，当你移入浏览器窗口时，SVG位于页面底部（长长的信息图），文本变得很小，无法阅读，我需要增大文本大小，或者你提出的任何其他建议都会很好。哦，我明白了。当SVG缩小时，您希望文本保持清晰的大小。我认为这是不可能的——您无法在SVG中获得要重写的文本。切换到HTML或使用整个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>