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

【问题标题】：How to properly cut an svg shape in two parts?如何正确地将 svg 形状分成两部分？
【发布时间】：2015-08-01 13:46:05
【问题描述】：

我有一个 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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
保持 SVG 完整，禁用指针事件：css 中无，因此您无法单击它。位置 2 的矩形几乎不可见（例如不透明度 0.0001）并将点击处理程序或 href 附加到它们。
或者将 SVG 保持为一个整体，并将单独的 g 元素包装在它们自己的链接中。
谢谢大家，我其实也有类似的想法。知道为什么图像会这样吗？
如果没有实际演示，我们无法判断...

标签： html css svg adobe-illustrator

【解决方案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 */

【讨论】：

这个想法是让这个图像占据大部分屏幕并具有自适应性，这就是首先使用svg的原因。将图像设置为固定高度并没有真正帮助。不过，我可能错了，正如您已经猜到的那样 - 我非常缺乏经验。
您是否尝试过使用单个 div 将 img 容器并排放置？
看看this variation：将海德div 的宽度缩小1 px 实际上可以修复对齐，但仍然需要修复分隔垂直线。
知道了 - see for yourself。 img 元素上的负左边距可以解决问题。不过还是没有解释。我已经相应地调整了答案。
是的，最后一个有效，非常感谢。虽然如果你缩小超过 50%，它会再次开始不匹配，但这是我迄今为止最好的结果，所以我会坚持下去。

【解决方案2】：

它们没有完美对齐的原因是因为两个 SVG 视图框的尺寸不同。

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

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

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

对于 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 视图框的宽度值以匹配 Jekyll 的。即把viewBox改成：

viewBox="481.73 57.015 61.08 163.904"

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

【讨论】：