Adding clip-path to svg image element that has extra vertical space - html

Question

I'm having trouble controlling the clip-path coordinates on an image element in a responsive inline svg. Here is my code example (jsfiddle: http://jsfiddle.net/tbbtester/4XP4w/):
CSS:
ul{margin:0;padding:0;list-style:none;height:510px;position: relative;width:1140px;}
li{margin:0;padding:0;position:absolute;background:blue;width:40.1754386%;height:52.15686275%;overflow:hidden;top:0;left:0;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
image{clip-path: url(#promo5-1-image);}
HTML:
<ul>
<li>
<svg viewBox='0 0 100 87.59398496' preserveAspectRatio="xMidYMid slice" xml:space="preserve">
<defs>
<clipPath id="promo5-1-image">
<polygon points="0,0 100,0 100,70 0,87.59398496" />
</clipPath>
</defs>
<image preserveAspectRatio="xMinYMid meet" x="0" y="0" width="100" height="87.59398496" xlink:href="http://svgtest.tbb.dev.novicell.dk/test.jpg" src="http://svgtest.tbb.dev.novicell.dk/test.jpg" overflow="visible" />
</svg>
</li>
</ul>
The entire image is visible, nothing has been cut off. But the image element is actually larger than the displayed area - it seems that unnecessary space is added above and below the image, and it causes problems when I want to add a clip-path to it since the point 0,0 starts outside the visible area. (You can see the extra space if you click the image element in the dom in the browsers developer tools)

Answer 1

Ok, I found the solution. The problem was mainly that I used a wrong way of calculating the coordinates of the svg and its elements. Solution fiddle: http://jsfiddle.net/tbbtester/4XP4w/1/
CSS:
ul{margin:0;padding:0;list-style:none;width:100%;height:510px;position: relative;width:1140px;}
li{margin:0;padding:0;position:absolute;background:blue;width:40.1754386%;height:52.15686275%;overflow:hidden;top:0;left:0;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;overflow:hidden;}
image{clip-path: url(#promo5-1-image);}
HTML:
<ul>
<li>
<svg viewBox='0 0 100 58.07860262' preserveAspectRatio="none">
<defs>
<clipPath id="promo5-1-image">
<polygon points="0,0 100,0 100,50.87336245 0,58.07860262" />
</clipPath>
</defs>
<image x="0" y="0" width="100" height="58.07860262" xlink:href="http://svgtest.tbb.dev.novicell.dk/test.jpg" src="http://svgtest.tbb.dev.novicell.dk/test.jpg" />
</svg>
</li>
</ul>