包裝的文字與TEX-錨：年底

HTML：

<svg class="container"> 
    <g> 
    <svg class="amount-container"> 
     <text class="amount" >500</text> 
    </svg> 
    </g> 
</svg>

CSS：

.amount { 
    writing-mode: tb; 
    text-anchor: end; 
} 

.amount-container { 
    overflow: visible; 
} 

.container { 
    background: white; 
    margin: 200px; 
    overflow: visible; 
}

Demo in Jsfiddle

問題是我希望容器svg（'.container'）增加其高度以包裝文本（'.amount'）。任何想法如何解決它？由於事先不知道文本的長度，因此我無法指定固定的填充頂部。

來源

2016-04-26 Enrique Marcos

我不確定我是否理解。在你的jsFiddle中，你偏移了文本的'y'位置。你不能只給它一個'x'和'y'的位置來保存它在容器內嗎？ EG：http：//jsfiddle.net/jy2p5ek0/1/ – Moob

它不是SVG中的「容器」......它基本上是一個「畫布/畫板」，您將它放在上面。 SVG中的元素不會影響SVG的大小。 –

您無法自動做到這一點。 SVG沒有像HTML這樣的自動佈局。您必須設置其寬度和高度，類似於<canvas>元素。

您唯一的選擇是使用Javascript來檢測文本的大小（通過在文本元素上調用getBBox()）並更改SVG的大小以匹配。

來源

2016-04-26 18:43:43

您可以簡單地將屬性x和y添加到您的文本元素以更改位置。你可以有，例如，這樣的事情：

<text class="amount" x=10 y=5>5000</text>

，一切都應該工作

來源

2016-04-26 09:43:45 Icarus

對於一個特定的文本，是的，它會工作;但對於一般情況不適用。 –

包裝的文字與TEX-錨：年底

回答

相關問題