svg - SVG 水平大括号

Question

我正在尝试创建一个从键盘字符开始并对其进行转换的宽水平花括号。

我从：

<text x="40" y="120" transform="rotate(90, 40, 120)">}</text>

现在我想拉伸文本以使其更宽。忘记使用 CSSfont-size元素，字体粗细的大小也会相应改变，产生一个胖符号。

我想通过保持瘦来拉伸角色。

然后我开始使用symbolanduse组合，以尝试利用该viewbox功能

这是我最后尝试的：

<symbol id="curly-bracket">
    <text>}</text>
</symbol>
<use x="40" y="120" transform="rotate(90, 40, 120)" xlink:href="#curly-bracket" />

角色现在看起来被剪掉了，我发现没有办法让它正确显示。

阅读W3 SVG 文档时，我很难理解自己在做什么。

score 5 · Accepted Answer

<text x="40" y="120" transform="rotate(90, 40, 120) scale(1,2)">}</text>

这将使所有 y 坐标加倍，并且由于您已将其旋转 90 度，因此将水平拉伸它。

尝试从 W3 规范中学习 SVG 会让您感到沮丧和困惑。它不是作为如何使用它的教程而编写的。这是关于 SVG 转换的一个很好的资源。如果您真的对 SVG 感兴趣，我建议您阅读整本电子书。我认为这是最好的资源。

1 回答 1