垂直居中多行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文本

回答

相关问题