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

Question

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

<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 容器中以不同的高度（在我的平台上为增量：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 viewBoxes 的尺寸不同。

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

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

为了计算每个图像的高度，浏览器使用该宽度并根据纵横比对其进行缩放。

对于 jekyll，viewBox 的宽度和高度为 61.08 x 163.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"

我还没有测试过，但我认为应该可以。

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

How to properly cut an svg shape in two parts?

html

css

svg

adobe-illustrator