Question

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

我开始时：

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

现在我想扩展文本以使其更宽。忘记使用CSS font-size元素，font-weight的大小也会相应地改变，产生一个胖符号。

我想通过保持它变薄来拉伸角色。

然后我开始使用symbol和use组合，尝试利用viewbox功能

这是我上次尝试的内容：

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

角色现在显得切割，我发现无法正常显示。

我很难理解我在做什么，阅读W3 SVG doc。

Answer 1

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

这将使所有y坐标加倍，并且因为你将其旋转了90度，将水平拉伸。

尝试从W3规范学习SVG会让你感到沮丧和困惑。它不是作为如何使用它的教程编写的。 Here's a great resource on SVG transforms。如果您真的对SVG感兴趣，我建议您阅读整本电子书。我认为这是最好的资源。