如何使用AMPLE SDK缩放和平移嵌入XHTML页面的SVG文档

Question

您好我正在将我的地图从栅格开发到矢量

我已经设法将SVG地图文件嵌入到XHTML页面中，我使用的是AMPLE SDK库，它适用于所有浏览器。

但是如何使用此库缩放并平移到地图中？ 我正在使用AMPLE SDK，因为来自SVG To Raphael的Raphael转换器无法正常工作 好办法。 RAPHAEL CONVERTER

Answer 1

您可以通过在svg元素上操作viewBox属性作为echo-flow建议来实现SVG片段的缩放和平移。但是，您应该使用setAttribute来反映更改：

ample.getElementById("mysvg").setAttribute("viewBox", "500 500 1000 1000");

或

ample.query("#mysvg").attr("viewBox", "500 500 1000 1000");

研究viewBox属性的格式，不难发现它应该如何操作。

Answer 2

如果Ample SDK支持动态SVG（看起来像它），那么您可以通过编写SVG根元素的viewbox属性来响应鼠标事件来添加此功能。例如。

var newX = 100;
var svg = document.documentElement;
svg.viewBox.baseVal.x = newX;

您仍然需要连接此代码以响应鼠标事件。

如果你想要图书馆支持，你可以考虑使用jQuery SVG库（虽然，我不确定这对Ample会有多好）：http://keith-wood.name/svg.html

可以在此处找到用于使用视图框执行动画缩放的jquery SVG的演示：http://keith-wood.name/svg.html#anim