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

Question

我在 svg 中有一系列矩形框，超出了 SVG 标签的宽度同样我想用外部按钮实现滚动到它的内部物质，这样它就会从内容的初始宽度滚动到它的最大内部宽度. 我在这里重新引用 Canvas 代码中的逻辑: 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) 来改变水平滚动的 x 值。但找不到确切的实现。

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 值实质上会移动所有 svg 内容中 200x200 可 window 口的左上角位置。

修改宽度和高度使您能够放大或缩小 svg 的一部分，尽管这可能不适用于您的示例。知道起来还是很方便的:)

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