Question

我总是在SE上找到最好的答案，所以这里有一个问题让我觉得这个网站上的某个人可能知道解决方案。

我有一个大型的Illustrator文件（一张地图），我用一个旧版本的Illustrator切片到128个相同的部分（用HTML）（较新版本不提供此功能）。这些切片在我们的网页上被“重新组装”，因为它们被查看。

事实上，有时切片边缘的艺术碎片会碎片化。例如，可能有许多较小的插图落在两个切片的边缘。有时这些较小的插图在“重新组装”以便在网页上查看时正确显示，有时只会显示不完整的部分。

我认为解决方案是在两个SVG切片中都有完整的较小的插图，这样无论哪个切片正在读取，整个较小的插图都会出现，但是还没有找到办法确保这一点。我已经尝试将较小的插图分组，但这似乎不起作用。

切片的布局在我头上，所以我不打算重新编码网站。此外，我已经能够在几次成功更新切片。只是不总是。

有人请考虑我的问题吗？任何建议将不胜感激。

由于

TomH

Answer 1

如果我有128个svg文件，我想在HTML页面中动态对齐，我可能会尝试按特定顺序加载它们。例如，我会在前一个onload被触发后调用'next'文件。听起来像是个计划？：）

Answer 2

听起来你正在使用工具来做一些不打算做的事情。将大图像切片或平铺成较小的片段通常用于分解光栅（基于像素的）图像，但它对SVG没有多大意义。 SVG <circle>或<rectangle>或<path>是单个元素，即使它可以跨多个图块绘制。对于SVG，如果您有一个非常大的文件，还有其他方法可以将其分解为多个文件，通常包含不同类型元素的图层。

复制任何跨越切割线的元素应该能够确保它们出现在最终产品中，这对于编码来说并不是一件容易的事情，特别是考虑到你当前正在使用Inkscape函数来做工作。

然而，与此同时，您可以简单地尝试更改CSS以让SVG溢出其边框。这样，只要每个元素都在一个瓷砖中定义，就应该在屏幕上完整地绘制它们。但是，您会发现Webkit浏览器（Chrome，Opera）只会让SVG溢出到它自己的填充空间中，因此您需要为每个磁贴提供足够的填充以覆盖裁剪的元素，然后用负数取消填充边距：

svg.map-tile {
    overflow:visible;
    padding:50%;
    margin:-50%;
}

你没有指定你的瓷砖在页面上的排列方式，所以我希望玩边缘和填充不会让它失效。

防止SVG切片碎片切片边缘上的对象

2 个答案: