Question

我无法控制响应式内联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中的图像元素，则可以看到额外的空间）

Answer 1

好的，我找到了解决方案。问题主要在于我使用了错误的方法来计算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>

将剪辑路径添加到具有额外垂直空间的svg图像元素

1 个答案: