Почему этот SVG принимает высоту родителя?

Question

У меня есть SVG, который я хочу оставить на фиксированной высоте/ширине (560 пикселей x 275 пикселей), а также обрезается полигональной обтравочной маской.

По какой-то причине SVG адаптируется к высоте его родительского div и не будет выравниваться полностью влево (если вы растянете окно этой скрипки, вы увидите, что он начинает блуждать вправо.)

Как я:

1. Убедитесь, что SVG сохраняет ту же высоту,
2. Расположите его в верхнем левом углу

http://jsfiddle.net/#&togetherjs=onwz4D9y63

<div class="quad"> 
    <svg id="kanye" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 560 375"> 
     <g> 
      <defs> 
       <polygon id="SVGID_1_" points="0,0 0,1000 400,1000"/> 
      </defs> 

      <clipPath id="SVGID_2_"> 
       <use xlink:href="#SVGID_1_" style="overflow:visible;"/> 
      </clipPath> 

      <g id="LwhyVN.tif" style="clip-path:url(#SVGID_2_);"> 
        <image style="overflow:visible;" width="560" height="375" xlink:href="http://nymag.com/daily/entertainment/upload/2010/08/what_did_it_cost_to_be_kanye_t/20100803_kanye_560x375.jpg"> 
       </image> 
      </g> 
     </g> 
    </svg> 
</div> 

.quad { 
      position: absolute; 
      width: 50%; 
      height: 50%; 
      bottom: 0; 
      right: 0; 
      background-color: green; 
     } 

#kanye { 
     position: absolute; 
     left: 0; 
     top: 0; 
    } 

Answer 1

Установить положение kanye id to fixed. И установите атрибут preserveAspectRatio элемента svg на none, в html.

<svg id="kanye" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200"> 

Edit:

Для того, чтобы привести в соответствие с верхней левой части зеленого четырехъядерных DIV, только конкретным position:fixed для kanye и удалить атрибуты top:0 и left:0. Вам также необходимо отключить preserveAspectRatio

Как здесь: http://jsfiddle.net/P5ggG/

Answer 2

Я понял это: просто убить viewbox

это всегда неприятный атрибут и его следует избегать, если это возможно