¿Por qué esta svg se recorta y no se escala?

Question

Soy nuevo en SVG y estoy un poco sorprendido de que este ejemplo esté recortado y no tenga escala. ¿Qué le falta para hacerlo escalable/considerable usando ancho/alto en el elemento svg?

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="200px" 
    height="200px" 
    viewBox="0 0 400px 400px"> 
    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm"> 
    <circle cx="200px" cy="60px" r="100" fill="red" 
        transform="translate(0,50)" /> 
    <circle cx="200px" cy="60px" r="100" fill="blue" 
        transform="translate(70,150)" /> 
    <circle cx="200px" cy="60px" r="100" fill="green" 
        transform="translate(-70,150)" /> 
    </g> 
</svg> 

Answer 1

porque si su viewBox no es válida la ventana gráfica se determina por la anchura y altura del elemento más exterior (en su caso, el elemento SVG en 200x200px). Como su contenido se desborda, se recorta.

Al definir un viewBox válido de 400x400, le dio a su contenido suficiente espacio dentro del viewBox, pero todo se ajustó a escala dentro del elemento SVG. ViewBox es una especie de espacio virtual mapeado en el espacio real.

El problema es bastante complicado. La ventana gráfica y la vista son cosas diferentes. La especificación cubre ambos en detalle: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute