如何将svg形状分成两部分正确裁剪？

Question

我有一个svg标志，想法是-当你点击它的每一半，你应该被重定向到两个不同的页面。因此，我已经把这个标志切割成两个相等的部分，使用插画，以便以后匹配他们在一起。

<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文件在它们的img容器中呈现在不同的高度(我的平台上的增量: 3px)，尽管svg的视口尺寸相同。

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

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

更新

绝对措施不能令人满意。还有另一种解决方案只涉及互补的CSS (在线演示在这里的代码 )：

#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 */

Answer 2

它们不完全对齐的原因是因为两个SVG viewBoxes没有相同的维度。

因为您只为两个父div提供宽度，所以每个图像的最终高度都是使用viewBox高宽比计算的。

在您的代码页中，给出了两个图像(#lobby的一半)的#lobby宽度，其实际宽度为148.188px。为了简化计算，让我们将其除以148‘s。

要计算每幅图像的高度，浏览器将使用该宽度并根据高宽比进行缩放。

对于jekyll，viewBox的宽度和高度是61.08x163.904。

对于海德，是: 60.699 x 163.904。

因此，计算出的每个高度如下：

Jekyll: 148 * 163.904/61.08  = 397px
  Hide: 148 * 163.904/60.699 = 400px

因此出现了差异。

由于RHS ( hyde )比较窄，并且它在视图框中左对齐，一个简单的修复方法是修改hyde viewbox的宽度值以匹配Jekyll的宽度值。也就是说，将viewBox更改为：

viewBox="481.73 57.015 61.08 163.904"

我还没做过测试，但我认为这应该有效。