Question

我在下面有一个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行：-----＆gt; enter image description here

但我希望文本以2行呈现，如下所示：-----＆gt; enter image description here

我怎样才能做到这一点？

Answer 1

您需要将每个部分打包到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>

<强>更新

这也可以使用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>

SVG文本 - 使文本显示为2行

1 个答案: