xml - 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'</a> 和'preserveAspectRatio'</a> 属性。

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