仅高度的 D3 图像过渡

Question

我正在尝试使用 D3 过渡和图像，但我似乎遇到了问题。

我试图通过让图像的顶部和底部靠近直到它到达中间来使图像消失，就像快门效果一样，或者从顶部和底部擦除线条直到全部消失。我根本不希望图像缩放，我只想关闭它。

到目前为止，我已经将图像缩小到 0，但这不是我想要的。

在第一次转换时，它会在开始转换之前将图像放到盒子的中间，这是怎么回事？

http://jsfiddle.net/Qda6B/

var svgContainer = d3.select("#box").append("svg")
.style("width", '100%')
.style("height", '100%')
.style("background-color","blue");

var imgs = svgContainer.append("svg:image")
.attr("xlink:href", "http://guiaavare.com/img/upload/images/Aishwarya-Rai-face.jpg")
.attr("width", "400")
.attr("height", "400");

d3.select("#inbutton").on("click", function () {
imgs
    .attr("height",400)
    .transition()
    .attr({
        height: 0,
        y: 200
    })
    .duration(500);
});

d3.select("#outbutton").on("click", function () {
imgs
    .transition()
    .attr({
        height: 400,
        y: 0
    })
    .duration(500);
});

提前致谢

Answer 1

使用clipPath:http://jsfiddle.net/Qda6B/5/后可以达到你想要的效果

var clipRect = svgContainer.append('svg:defs')
                .append('svg:clipPath')
                .attr('id', 'shutter-clip')
                .append('rect')
                .attr({
                    x: 0,
                    y: 0,
                    height: 400,
                    width: 400
                })


var imgs = svgContainer.append("svg:image")
    // ...
    .attr("clip-path", "url(#shutter-clip)");

然后在rect 内的height 上执行transitions clipPath。

---

顺便说一句，虽然这可能与d3 有关，但这很可能属于 CSS3 过渡或 jQuery 或 GASP 动画领域。