2016-08-15 4 views
0

私は、次のSVG HEREの周りplaingた、SVGは以下のようになります。SVGは、ビューボックスが幅と高さに比例するように切り取られたように見えるのはなぜですか?

<svg width=200 height=200 viewbox="0 0 240 240" > 
    <path d="M220, 220 
      A200, 200, 0, 0, 0, 20, 20 
      L 20, 220 
      Z" 
    fill = "lightskyblue"> 
    </path> 
</svg> 

は今二つwidth=200 height=200高さと幅200それぞれに設定されており、私ならば、今"0 0 240 240"に設定ビューボックスに気づきますビューボックスを"0 0 200 200"に設定すると、画像が切り取られて見えますか?今はどうしてですか?なぜ画像がカットされて見えるのですか?高さと幅がそれぞれ200 and 200に設定され、ビューボックスが"0 0 200 200"に設定されているので、svgは100%表示されるはずですが、その理由は何ですか?なぜ、svgが切り取られたように見えるのですか?誰か説明できますか?

ありがとうございます。

+0

の範囲を超えて拡張するため、SVGはトリミング表示されます。レンダラは、ビューポート内でどの程度ドキュメントを表示したいかをSVGの幅と高さで指定します。あなたのビューボックスがビューポートより大きい場合、ドキュメント内のすべてのものが収まるように縮小されます。 –

答えて

1

あなたのビューボックスの寸法は200に設定されているが、あなたのパスが220の値が含まれているので、それはあなたがビューボックスが何をするかの誤解を持っているようですねビューボックス

関連する問題