再现SVG图形

我准备在以前的考试考试和的问题之一是重现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瞎搞，但无济于事。
任何帮助/提示/建议表示赞赏。

来源

2012-09-06 Aerus

出于好奇：什么（精彩）课程考试要求你手工编写SVG？ – Phrogz

@Progrog本课程被称为文档处理，在前几章介绍了XML和XSLT（除其他外）。 SVG部分是课程中非常非常小的一部分。在这个练习中，我们得到了XML中的图形表示，我们必须编写一个XSLT来将XML转换为SVG代码。这不是很难，我可以假设没有多少人手工编码svg :) – Aerus

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

来源

2012-09-06 10:55:37 Duopixel

我*知道*它必须是'viewBox'的东西啊，至少我很接近:)。非常感谢！ – Aerus

回答

相关问题