use*_*572 4 javascript css svg snap.svg
我有一个SVG容器作为我的纸张填充整个页面.在这个容器中,我以网格图案显示元素.
假设每个形状填充一个100 x 100像素大的空间,网格大500 x 500像素.我希望在第一个单元格中有一个位置(0,0),一个在最后一个单元格中,位置(400,400)等.
而Snap.SVG允许为诸如Paper.rect和Paper.circle之类的形状设置x和ay(或cx和cy),而对于Paper.path或Paper.polyline,似乎没有很好的记录方法.元素.当然,这种行为应该是预期的,因为正如官方文档中所指出的,Paper.polyline是用多个x和y变量定义的(而Paper.path似乎根本没有任何变量).因此,仅仅设置单个x或y并期望整个形状移动对我来说没有意义.但是,这是有问题的,因为我试图多次为Paper.path定位相同的设计,而不必更改其原始路径String.
虽然我找到了使用Path.polyline的解决方法,但它总体上不是最理想的,尤其是在扩展网格长度时.我应用了一个映射函数,它将每个Paper.polyline坐标转换为网格中应该结束的位置.我打赌,对于我打印的每个形状迭代遍历每个坐标是一个不必要的昂贵过程,并且必须有一种方法来为整个元素本身设置全局x和y.
我不熟悉snap.svg,但我必须相信它提供了翻译元素的能力,即将其移动到新的x,y位置.通常,通过svg dom移动路径,如...
<path transform="translate(myX myY)" d="...." />