0

我正在尝试使用双旋转使文本在 svg 中垂直显示。我想将每个字符旋转零度并且所有字符垂直对齐。假设原始 svg 是：

   <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start"  >VERTICAL TEXT TEST</text></svg>

结果：

    <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start">VERTICAL TEXT TEST</text></svg>

现在垂直旋转我尝试了这种方法：

1.交换svg的高度和宽度
2.使用旋转和变换功能双旋转90度

这是代码：

    <svg x="351" y="631" width="40" height="400" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

结果 ：

垂直旋转后的结果

因此，从图像中可以明显看出，字母之间的空格没有得到正确处理。那么如何实现空间自己动态处理。基本上，我的要求是，如果有人点击一个按钮来垂直旋转文本，它应该以从上到下的方向显示，原始空间是水平的。

4

2 回答 2

1

您应该使用 text-orientation 和 writing-mode 来获取垂直文本。

html, body {
  height: 100%;
}
text {
  text-orientation: upright;
}
<svg width="100%" height="100%"><text x="100" y="0" font-family="Oswald Medium" font-size="35px" fill="black" writing-mode="vertical-lr" text-anchor="start">VERTICAL TEXT TEST</text></svg>

于 2020-11-26T10:50:55.513 回答
0

使用letter-spacing它会因为旋转而影响您的情况下的垂直间距

<svg x="351" y="631" width="40" height="620" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="13" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

于 2020-11-26T09:34:15.960 回答