SVG縮放文本以適合容器

這可能是一個非常簡單的問題，但是如何在SVG中獲取文本以適應其容器？SVG縮放文本以適合容器

我不在乎它是否因拉伸太長或太高而看起來醜陋，但它需要適合其容器並儘可能大。

謝謝

來源

2010-05-30 Tom

viewbox attribute是你所需要的。

來源

2010-05-30 13:32:33 msw

甜蜜，完美的作品！起初我有點困惑 – Tom 2010-05-30 13:47:21

+22

你能舉個例子嗎？我不明白。視圖框需要維度，我不知道我的文本有多寬。 – 2012-04-01 12:10:06

我認爲這個答案是可變大小的容器，而不是可變大小的文本。 – algiecas 2012-08-23 12:30:36

如果你真的不在意文本變得難看，下面介紹如何將未知長度的文本放入已知寬度。

<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

來源

2013-03-15 10:46:36 Bemmu

這是否在IE中工作？似乎沒有用，但我有很多其他的東西在玩。 – whyoz 2015-01-24 20:33:06

如果文字以空格開始或結束，則可能需要使用牢不可破的空格。 – 2017-02-17 14:05:36

也許這會爲你工作。你必須調整值，但它調整大小，當父div調整。 Here's my dabblet example.它的工作方式與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>

其他資源，我看了看：

來源

2013-03-24 10:28:10 Stoikerty

真棒主義yoschi，謝謝你 – zanona 2013-08-13 10:03:18

不客氣。這是我對「互聯網」的第一次貢獻之一，所以我很高興聽到我能聯繫到某人。（我現在稱爲Stoikerty：P） – Stoikerty 2013-08-27 20:03:06

以下是我想出了...它類似於其他人張貼到了什麼，但我認爲它調整大小並很好地擴展。此代碼將間距添加到大約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>

來源

2013-12-30 04:09:22 DiggityDug

SVG縮放文本以適合容器

回答

相關問題