html - 如何正确地将 svg 形状分成两部分？

Question

我有一个 svg Logo ，想法是 - 当您单击它的每一半时，您应该被重定向到两个不同的页面。因此，我使用 illustrator 将这个 Logo 剪成两等份，以便稍后将它们匹配在一起。

<div id="lobby">
    <div id="jekyll">
        <a href="#" >
        <img src="lobby/jekyll.svg" alt="dr.Jekyll">
        </a>
    </div>      
    <div id="hyde">
        <a href="#" >
        <img src="lobby/hyde.svg" alt="mr.Hyde">
        </a>
    </div>
</div>

CSS
#jekyll{
    float:left;
    width:50%;

}

#hyde{
    float:right;
    width:50%;

}

但问题是 - 虽然两张图片在顶部完美匹配，但它们在接近底部时开始不匹配，我已经尝试过用不太复杂的图片使用相同的技术，但同样的事情发生在那里。有没有正确的方法或替代方法？ http://codepen.io/anon/pen/YXdymZ

Answer 1

尽管 svg 视口(viewport)尺寸相同，但 svg 文件在其 img 容器中以不同的高度呈现(在我的平台上为 3px)。

虽然我无法告诉您此行为的原因，但将 img 高度设置为相同的值可以解决问题:

#jekyll img, #hyde img { height: 421px; }

更新

绝对措施并不令人满意。还有另一种解决方案仅涉及补充 CSS(在线演示 here on codepen):

#jekyll{
    float:left;
    width:50%;
    margin-left: 1px; /* added */
}

#hyde{
    float:right;
    width:calc(50% - 1px); /* added */
}
#hyde img, #jekyll img { margin-left: -1px; } /* added */