Javascript svg中的patternTransform不适用于整个模式

我在D3中使用了一个模式，以便在节点中放置一个图像，我可以成功地渲染图像。我正在使用一个旗子精灵，只想为每个旗子剪辑一小部分。我能够做到这一点，为2/3的形象，但由于某种原因，它不会显示任何部分的图像低于110像素。图像是256乘176

javascript
        //canvas
    var svg = d3.select("#chartContainer")
        .append('svg')
        .attr("width", 400)
        .attr("height", 400)
        .append('g');

        svg.append("pattern")
            .attr("id", "us")
            ///should be transformed to the US coordinates but the Algerian Flag appears
            .attr("patternTransform", "translate(-128, -154)")
            //this correctly shows the Canadian Flag
            //.attr("patternTransform", "translate(-16, -22)")
            .attr("width", 16)
            .attr("height", 11)
            .append("image")
            .attr("xlink:href", "https://dl.dropboxusercontent.com/u/5258675/flags.png")
            .attr("width", 256)
            .attr("height", 176);

    svg.append("rect")
        .attr("width", 16)
        .attr("height", 11)
        .attr("x", 50)
        .attr("y", 50)
        .attr("fill", "url(#us)");

这里还有一个代码笔：

---

可以在此处看到图像精灵的坐标：。

最简单的方法可能是将

图案变换

一起删除，然后在

上执行

变换

svg.append("pattern")
    .attr("id", "us")
    .attr("width", 16)
    .attr("height", 11)
  .append("image")
    .attr("xlink:href", "https://dl.dropboxusercontent.com/u/5258675/flags.png")
    .attr("transform", "translate(-128, -154)")
    .attr("width", 256)
    .attr("height", 176);

这将图案的尺寸设置为16×11，用于剪裁包含的图像。然后将
flags.png
图像转换为正确的偏移量（例如，美国为-128，-154），从而根据需要定位要显示的美国国旗。当然，这也适用于任何其他标志

请查看以下代码片段，以获得一个可用的演示：


var svg=d3.选择（“图表容器”）
.append（'svg'）
.attr（“宽度”，400）
.attr（“高度”，400）
.append（'g'）；
追加（“模式”）
.attr（“id”、“美国”）
.attr（“宽度”，16）
.attr（“高度”，11）
.append（“图像”）
.attr（“xlink:href，”https://dl.dropboxusercontent.com/u/5258675/flags.png")
.attr（“转换”、“转换（-128，-154）”）
.attr（“宽度”，256）
.attr（“高度”，176）；
svg.append（“rect”）
.attr（“宽度”，16）
.attr（“高度”，11）
.attr（“x”，50）
.attr（“y”，50）
.attr（“填充”、“url（#us）”）

Ok我删除了大量代码，所以现在只有一个矩形。希望这有助于解决问题。明白了，谢谢！你知道为什么patternTransform对图像的下半部分不起作用吗？我还是不明白。