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 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调整大小时调整大小.这是我的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>