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>

enter image description here

Answer 2

这是我提出的......它与其他人发布的相似，但我认为它可以很好地调整大小和缩放。此代码将为大约10-25个字符之间的任何文本添加间距，以使其填充其父级的整个宽度。如果您需要更长或更短的文本，只需调整viewBox width和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调整大小时调整大小。 Here's my dabblet example.它与fittext.js

类似

我使用了‘viewBox’＆amp; ‘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>

我看过的其他资源：

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>

SVG缩放文本以适应容器

4 个答案: