SVG文本 - 使文本顯示在兩行

的jsfiddle - http://jsfiddle.net/E4VvX/

<text y="9" x="0" dy=".71em" style="text-anchor: middle; max-width: 30px;width: 30px;white-space: pre-wrap;" >Jul 2014</text>

文本出現在1行是這樣的：----- > enter image description here

，但我希望文字在2線呈現這樣的：-----> enter image description here

我該如何做到這一點？

來源

2014-07-04 Ishita

參見[這個問題]（http://stackoverflow.com/a/16701952/2065702） –

您需要包裝每件在tspan文本，設置d屬性0和dy屬性下移。

JSFiddle

.dt { 
 
    text-anchor: middle; 
 
    -webkit-transform: translate(50px,50px); 
 
     -moz-transform: translate(50px,50px); 
 
     -ms-transform: translate(50px,50px); 
 
     -o-transform: translate(50px,50px); 
 
      transform: translate(50px,50px); 
 
}

<svg width="100px" height="100px"> 
 
    <text class='dt'><tspan x="0" dy="0em">Jul</tspan><tspan x="0" dy="1em">2014</tspan></text> 
 
</svg>

UPDATE：

這也可以做同樣的事情用foreignObject，在Internet Explorer 9的支持成本。

JSFiddle

foreignObject { 
 
    text-align: center; 
 
    -webkit-transform: translate(50px,50px); 
 
     -moz-transform: translate(50px,50px); 
 
     -ms-transform: translate(50px,50px); 
 
     -o-transform: translate(50px,50px); 
 
      transform: translate(50px,50px); 
 
}

<svg width="100px" height="100px"> 
 
    <foreignObject width="40px" height="40px" requiredExtensions="http://www.w3.org/1999/xhtml"> 
 
     <body xmlns="http://www.w3.org/1999/xhtml">Jul 2014</body> 
 
    </foreignObject> 
 
</svg>

來源

2014-07-04 23:47:57

謝謝亞歷山大。有沒有其他辦法可以達到同樣的效果？即我們可以在文本內插入另一個元素嗎？ – Ishita

@Ishita不，但可以使用'foreignObject'完成類似的效果。有更多的開銷來使用它，但我將它添加到我的答案以防萬一。 –

@ AlexanderO'Mara是正確的。基本前提是，SVG從來沒有打算成爲合成引擎，決定何時何地以及如何斷線。這是一個非常複雜的事情，因爲它可能涉及語言特定的連字規則。 foreignObject使用內置在瀏覽器中的組合規則，除非你必須在SVG中決定如何分解它。 –

SVG文本 - 使文本顯示在兩行

回答

相關問題