SVG水平花括号

Question

我想创建一个宽的水平花括号从键盘字符开始并转换它。

我开始：

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

现在我想伸展文本，使其更广泛。 忘掉使用CSS font-size元素，字体大小的大小也会相应改变，产生一个胖符号。

我想通过保持它很薄来伸展角色。

我然后使用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感兴趣，我建议您阅读整本电子书。我认为这是最好的资源。