svg - 再现 SVG 图

Question

我正在准备考试，之前考试的一个问题是在 SVG 中重现这个数字（尺寸可以自由选择）：

到目前为止，我是成功的，但目前我被卡住了。我似乎无法“砍掉”底部的数字：

这是我使用的代码：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...">
    <svg width="200px" height="200px" viewBox="0 0 200 200">
       <defs>
           <g id="circle">
              <circle r="100px" cx="0" cy="0" />
           </g>
       </defs>

       <use xlink:href="#circle" x="0" y="75"/>
       <use xlink:href="#circle" transform="translate(200,75)"/>
    </svg>
 </svg>

我试过弄乱viewBox，但无济于事。
任何帮助/提示/建议表示赞赏。

Answer 1

您需要调整height属性以及viewBox：

 <svg xmlns="http://www.w3.org/2000/svg">
    <svg width="200" height="150" viewBox="0 0 200 150">
       <defs>
           <g id="circle">
              <circle r="100px" cx="0" cy="0" />
           </g>
       </defs>

       <use xlink:href="#circle" x="0" y="75"/>
       <use xlink:href="#circle" transform="translate(200,75)"/>
    </svg>
 </svg>​

http://jsfiddle.net/VJcwx/