Question

我在svg中有一系列矩形框，超出了SVG标签的宽度，我希望用外部按钮实现滚动到内部事务，以便从内容滚动到内容的最大内部宽度。我从这里的画布代码中提取逻辑： http://jsfiddle.net/CQPeU/ 从这段代码：

window.onmousemove = function (e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.offsetX - lastX;
        translated += delta;
        ctx.translate(delta, 0); // translate the context.
        lastX = evt.offsetX;
        draw(); // redraw
    }
}

我尝试了同样的改变属性transoform：translate（x，0）with varing x value for horizontal scrolling。但是找不到确切的实现。

Answer 1

SVG的行为类似于它自己的小html文档，并且有一个名为viewBox的时髦属性可以帮助你。

假设你有一个svg元素，里面有一些测量200x200的东西。如果使用这些viewBox属性进行渲染，它将按照您的预期显示。

<svg width="200" height="200" viewBox="0,0,200,200"></svg>

属性值指的是：

minx, miny, width, height

其中minx是渲染区域左侧svg文档中的x位置，miny是svg文档在渲染区域顶部的y位置。

如果将宽度和高度保持在200，则更改这些minx和miny值实际上会将200x200可视窗口的左上角位置移动到所有svg内容中。

修改宽度和高度使您能够放大或缩小svg的一部分，虽然这可能不适用于您的示例..仍然有点方便知道：）

对于您的示例，请尝试根据您在事件侦听器中获得的鼠标拖动动作，在viewBox属性中递增或递减minx和miny值。

如何实现HTML5 svg内部上下文的水平滚动？

1 个答案: