SVG:我可以引用相同的元素/组/路径而不是多次复制它吗?

时间:2012-04-22 02:15:54

标签: graphics svg

我正在为一款小游戏制作一些图形。图形将是SVG并且将主要基于图块(想想塞尔达传说:SNES的过去链接)。我画了一个小草砖,想在整个场地上复制NxM次。在Inkscape或其他GUI SVG编辑工具中执行此操作会导致文件超过3.5MB,大于相同尺寸的32位位图。

我想知道是否可以定义某种“草瓦”对象,而不是将其复制到我的字段中的每个点,只需用适当的坐标引用它。我意识到这仍然会导致场景在加载时占用相同数量的内存,但这意味着要在光盘上存储更小的文件,希望这意味着更容易编辑,因为在这种情况下,如果我想要更改,例如,我的草的颜色,我只需要更改我的原型对象而不是进行更改,然后在整个字段上重新复制新的图块。

我已经针对各种关键字进行了大约6次不同的搜索,我认为这些关键字可能有所帮助,但似乎没有什么可以做我想要的。我想使用'xlink:href'属性,因为我看到它在标签中用于首先定义调色板,然后在包含变换数据的单独标签中引用它。

我尝试使用类似的东西:

<path id="grassyPatch" d="M 3.3310392e-7,608 31.993091,624 63.986183,608 31.993091,592 z" style="..." />

然后用以下内容复制它:

<path id="grass-copy1" xlink:href="#grassyPatch" transform="translate(32,-32)" /> <path id="grass-copy2" xlink:href="#grassyPatch" transform="translate(32,-64)" />

等。为了将它复制几次到新的位置。感谢是否有人可以告诉我这是否可行。到目前为止我还没有抱出希望,所以如果你也知道不可能,请告诉我,这样我就可以不再浪费时间了。

谢谢!

2 个答案:

答案 0 :(得分:35)

你几乎就在那里,你正在寻找复制/克隆的元素是<use>

<use xlink:href="#grassyPatch" transform="translate(32,-32)" />

答案 1 :(得分:1)

您提到要使用GUI工具来完成此任务,因此我想让您知道这在Inkscape中是可行的。您需要使用“复制”工具旁边工具栏上的“克隆”工具,或者按Ctrl-D。当您使用它时,克隆将直接放在它正在克隆的对象的顶部。只需使用移动工具将其放置在您想要的位置即可。

Inkscape在“保存”对话框的文件类型下拉列表中也有一个“优化的SVG”选项,它允许您通过删除无关信息来减少SVG的文件大小,以及可选地降低精度。