我在控制响应式内嵌svg中图像元素上的剪切路径坐标时遇到问题。这是我的代码示例（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>
整个图像可见，没有被截断。但是图像元素实际上大于显示的区域-似乎在图像的上方和下方添加了不必要的空间，并且由于要从点0,0开始在我想为其添加剪切路径，这会导致问题区域。 （如果您在浏览器开发人员工具中单击dom中的image元素，则可以看到额外的空间）
最佳答案
好的，我找到了解决方案。问题主要是我使用了错误的方法来计算svg及其元素的坐标。解决方法：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>
关于html - 将剪切路径添加到具有额外垂直空间的svg图像元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24324501/