垂直居中多行SVG文本

任何人都可以給我示例如何在SVG中垂直居中多行文本？我GOOGLE了，我看到很多參考對齊 - 基線和顯性 - 基林 e，但沒有具體的例子讓我看看。垂直居中多行SVG文本

例如，在下面的SVG中，TEXT元素被其左上角鎖定。文字開始出現在y位置之後。如果我希望文本均勻分佈在y位置之上和之下，我需要做什麼？

<text x="110" y="50" dy="0"> 
    <tspan dy="0em" x="110" style="font-weight: bold; fill: rgb(74, 76, 77);"> 
    <tspan x="110" dy="0em">This is my long quotation that will now wrap</tspan> 
    <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan> 
    <tspan x="110" dy="1.1em">Isn't that amazing?</tspan> 
    </tspan> 
    <tspan dy="1.5em" x="110" style="font-style: italic;"> 
    Speaker, Speaker Description 
    </tspan> 
</text>

（我通過D3生成此，如果這能幫助）

來源

2015-06-24 ThisRestlessPilgrim

請提供現在的照片和你想要的。這將有助於閱讀文本。 – kwoxer

你不能真正做到自動定心與SVG。 SVG沒有適當的自動佈局。

但是，您可以像使用dy那樣使用相對於基準的文本。記住dy也可以是負值。

<svg width="400" height="150"> 
 

 
    <line x1="110" y1="50" x2="400" y2="50" stroke="red"/> 
 
    <text x="110" y="50"> 
 
    <tspan x="110" dy="-0.8em">This is my long quotation that will now wrap</tspan> 
 
    <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan> 
 
    <tspan x="110" dy="1.1em">Isn't that amazing?</tspan> 
 
    </text> 
 

 
</svg>

你可以做的另一件事是使用<foreignObject>元素在你的SVG嵌入到HTML。顯然這隻適用於瀏覽器。

來源

2015-06-24 04:48:36

好吧，那太讓人失望了！我可以通過Javascript手動完成 - 測量文本尺寸，然後適當更改y值。謝謝:) – ThisRestlessPilgrim

即使是單行文本也是如此嗎？ – ThisRestlessPilgrim

您可以嘗試'alignment-baseline：middle'，但這在所有情況下都不起作用，並且可能無法在所需情況下提供所需的對中。 –

垂直居中多行SVG文本

回答

相關問題