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が切り取られたように見えるのですか?誰か説明できますか?
ありがとうございます。
の範囲を超えて拡張するため、SVGはトリミング表示されます。レンダラは、ビューポート内でどの程度ドキュメントを表示したいかをSVGの幅と高さで指定します。あなたのビューボックスがビューポートより大きい場合、ドキュメント内のすべてのものが収まるように縮小されます。 –