SVG水平の中括弧

Question

私はキーボードの文字で始まり、それを変換する幅広の水平の中括弧を作成しようとしています。

私が使用を開始：今、私はそれを広くするために、テキストを伸ばしたい

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

。 CSS font-size要素の使用を忘れてしまった場合、font-weightもそれに応じて変更され、太い記号が生成されます。

私はそれを薄く保つことによって文字を伸ばしたいと思います。

私はその後、viewbox機能ここで

を利用しようとする、symbolとuse組み合わせを使用して開始し、私は最後の試したものです：

<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座標を2倍にし、90度回転させたので横方向に伸ばします。

W3仕様からSVGを習得しようとすると、あなたは挫折し混乱してしまいます。それはそれを使用する方法についてのチュートリアルとして書かれていません。 Here's a great resource on SVG transforms。あなたが本当にSVGに興味があれば、その電子書籍全体を読むことをお勧めします。私はそれがそこの最高の資源だと思う。