SVG 缩放文本以适合容器

Question

这可能是一个非常简单的问题，但如何让 SVG 中的文本拉伸以适合其容器？

我不在乎它是否因拉得太长或太高而看起来很难看，但它需要适合它的容器并尽可能大。

谢谢

Answer 1

如果您真的不关心文本变得难看，以下是如何将未知长度的文本调整为已知宽度的方法。

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
    </g>
</svg>

Answer 2

这是我想出的...它与其他人发布的类似，但我认为它可以很好地调整大小和缩放。 此代码将为任何文本添加大约 10-25 个字符之间的间距，以使其填充其父级的整个宽度。 如果您需要更长或更短的文本，只需调整 viewBox 宽度和 textLength 属性即可。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
    Some Unknown Text that is resizing
</text>
</svg>

Answer 3

也许这对你有用。您必须调整这些值，但当父 div 调整大小时它会调整大小。 这是我的 dabblet 示例。 它的工作原理与 fittext.js 类似

我使用了 ‘viewBox’ 和 ‘preserveAspectRatio’ 属性。

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

我查看过的其他资源：

• 理解 SVG viewBox 的疯狂
• 如何使用 CSS 设置可缩放矢量图形的样式

Answer 4

您可以将

textPath

标签与

text

标签结合使用。如果您随后将

lengthAdjust

标签的

textPath

属性设置为

"spacingAndGlyphs"

（您还可以使用

method

属性并将其设置为

"stretch"

来调整渲染方法）。

示例：

<div style="width: 100%">
  <svg xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100"
      style="border:solid 6px"
      xmlns="http://www.w3.org/2000/svg">
      <g>
      <path id="svg-text" d="M 10 50 H 180" fill="transparent" stroke="lightgray" />

          <text>
          <textPath
                xlink:href="#svg-text"
                method="stretch"
                lengthAdjust="spacingAndGlyphs"
              >Beautifully resized!</textPath>
          </text>
      </g>
  </svg>
<div>

Answer 5

这是我想出的解决方案：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="50" height="50">
    <rect x="1" y="1" width="22" height="22" fill="none" stroke-width="1.5" stroke="black"/>
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="65%" fill="black">STR</text>
</svg>

这里 font-size 可以帮助您调整容器内的文本大小。 为了使文本适合 svg 的中心，您可以使用

x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"

Answer 6

如果你想要不管长度，只停留在界限内，这对我有用：

<svg width="100%" height="100%" style={{ backgroundColor: "transparent" }} xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">


    <text x="0" y="16" textLength="100" lengthAdjust="spacingAndGlyphs">


      I will fit inside the Parent Box
    </text>
  </g>
</svg>