下面有一个 SVH 文本元素:
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 行中，如下所示:----->
但我希望文本以两行呈现，如下所示:----->
我怎样才能实现这一目标？
最佳答案
您需要将每个片段包装为 tspan 中的文本，将 d 属性设置为 0 并将 dy 属性将其向下移动。
.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>更新:
这也可以使用 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>关于javascript - SVG 文本 - 使文本显示在 2 行中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24581623/