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视口尺寸相同，但svg文件在img个容器中以不同的高度（我平台上的delta：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 */

Answer 2

他们没有完美对齐的原因是因为两个SVG viewBox没有相同的尺寸。

由于您只为两个父div提供宽度，因此使用viewBox宽高比计算每个图像的最终高度。

在您的codepen中，50%两个图像的宽度（#lobby的一半）导致实际宽度为148.188像素。为了简化计算，我们将其舍入为148px。

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

对于jekyll，viewBox的宽度和高度为61.08 x 163.904。

对于hyde来说：60.699 x 163.904

因此，每个计算的高度将是：

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

因此存在差异。

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

viewBox="481.73 57.015 61.08 163.904"

我没有经过测试，但我认为这应该有用。

如何正确切割两个部分的svg形状？

2 个答案: