再現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

回答

相關問題