1

私は試験の準備をしています。以前の試験での質問の1つは、この図を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が、役に立ちませんでした。
ヘルプ/ヒント/アドバイスをいただければ幸いです。

4

1 に答える 1

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/

于 2012-09-06T10:55:37.673 に答える