Reproduire une figure SVG

Question

Je me prépare pour un examen et l'une des questions à un examen précédent était de reproduire ce chiffre en SVG (dimensions peuvent être librement choisis):

Jusqu'à présent, J'ai été un succès mais actuellement je suis coincé. Je ne peux pas l'air d'être en mesure de « couper » de la figure sur le fond:

Voici le code utilisé i:

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

J'ai essayé de déconner avec le viewBox, mais en vain.
Toute aide/conseils/conseils appréciés.

Answer 1

Vous devez ajuster votre attribut height ainsi que la 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/