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 /屏幕宽度变小时，我可以让文字大小增加吗？

非常感谢任何帮助。

Answer 1

使用纯SVG是不可能的（至少现在还没有）。唯一的解决方案是：

内联SVG并使用javascript操纵文本的大小。
内联SVG并使用媒体查询控制文本大小（见下文）。
将CSS添加到SVG并在那里使用媒体查询（见下文）。
使用媒体查询在页面变小时切换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>

Answer 2

可以在 html上下文中使用foreignObject svg元素，并对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>

SVG响应文本

2 个答案: