Почему этот svg обрезается и не масштабируется?

Я новичок в SVG и немного удивлен, что этот пример обрезан и не масштабируется? Чего не хватает, чтобы сделать его масштабируемым/значительным, используя ширину/высоту в элементе 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>
7
svg

1 ответов

потому что, если ваш viewBox недействителен, окно просмотра определяется шириной и высотой самого внешнего элемента (в вашем случае элемент SVG в 200x200px). Поскольку ваш контент переполняется, он обрезается.

определив допустимое поле просмотра 400x400, вы дали содержимому достаточно места внутри поля просмотра, но все это было масштабировано, чтобы поместиться внутри элемента SVG. ViewBox-это своего рода виртуальное пространство, отображаемое на реальное пространство.

проблема довольно запутана. Этот viewport и viewbox-это разные вещи. Спецификация охватывает оба подробно:http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

11