SVG响应式文本

Question

我在网页中有一个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/屏幕宽度变小的情况下增加文本大小？非常感谢您的帮助。

- Gaza

---

你试过不用像素来指定文本大小吗？ - r3mainer

我在CSS中有，还是你指的是<text>标签上？ - Gaza

通常情况下，SVG中的文本会与其他元素一起缩放（示例）。您似乎以某种方式禁用了这种行为。我只是想弄清楚如何解决。 - r3mainer

如果需要帮助，SVG 位于页面底部（长形信息图表）http://outhouse.scottishbordersdesign.co.uk/approach/ 当您缩小浏览器窗口时，文本变得太小而无法阅读，我需要增加文本大小，或者您有其他建议也可以。 - Gaza

哦，我明白了。你想在缩小SVG时保持文本的可读大小。我认为这是不可能的——你无法让文本在SVG内部重新换行。要么切换到HTML，要么将整个SVG用作背景图像，并使用center top位置，以便在较小的视口上裁剪非文本区域。 - r3mainer

Answer 1

仅使用 SVG 是不可能的（至少目前是这样）。唯一的解决方案是：

1. 将 SVG 内联，然后使用 JavaScript 来操作文本的大小。

2. 将 SVG 内联，并使用媒体查询来控制文本的大小（见下文）。

3. 为 SVG 添加 CSS，并在其中使用媒体查询（见下文）。

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的例子：在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>

- Paul LeBeau

---

他不能只使用媒体查询来增加字体大小吗？ - Sam Willis

流体包裹可能 https://css-tricks.com/svg-text-typographic-designs/ - animaacija

Answer 2

这可以通过在HTML上下文中使用foreignObject SVG元素并调整视图框来实现。

在这些演示中，文本保持可选：

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

- NVRM