再现SVG数字

时间:2012-09-06 10:38:29

标签: svg

我正在准备考试,之前考试的一个问题是在SVG中重现这个数字(尺寸可以自由选择):

enter image description here

到目前为止,我是成功的,但目前我被卡住了。我似乎无法“砍掉”底部的数字:
enter image description here

这是我使用的代码:

 <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,但无济于事 任何帮助/提示/建议表示赞赏。

1 个答案:

答案 0 :(得分:2)

您需要调整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/