SVG水平卷曲支架

时间:2013-03-07 17:10:24

标签: svg curly-braces

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

我开始时:

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

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

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

然后我开始使用symboluse组合,尝试利用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

1 个答案:

答案 0 :(得分:4)

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