SVG Sprite 模式在 D3 中不起作用答案

【问题标题】：SVG Sprite Pattern Not Working in D3SVG Sprite 模式在 D3 中不起作用
【发布时间】：2017-05-05 01:52:13
【问题描述】：

我正在 D3 中制作一个力导向图，其中包含国家节点和代表这些国家共享边界的链接。我试图让每个节点（一个 svg rect）都具有相应国家国旗的背景图像。我从 flag-sprites.com 抓取了图像和偏移像素数据。

我正在制作一个与每个国家/地区的 ID 标签对应的 SVG 模式列表，然后尝试将该模式附加到具有 rect“fill:”属性的每个 rect 元素。

这是我的代码： http://codepen.io/thmsdnnr/pen/ObdQvM

我有点困惑，因为当我在 Google Chrome 中使用检查器时，我的每个模式元素都有正确的 ID，每个矩形都附有完整的背景图像，以及适当的“背景位置”偏移量。

但是，每个节点都有相同的背景图像标志。当我尝试将模式中的 URL 模拟成普通的 HTML 时，它也不起作用。有人可以看到这里出了什么问题吗？我觉得（至少希望）我有点接近了……但我被困住了。

这是检查员提供的具有代表性的 rect 和 svg 模式：

<rect width="25" height="15" style="stroke: none; fill:
url(&quot;#pattern_sy&quot;); 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" 
x="441.4816383268158" y="382.4837223692339"></rect>

<pattern width="25" height="15" id="pattern_sd"><image
href="//raw.githubusercontent.com/thmsdnnr/learnyounode
/master/flags.png" display="inline-block" background-repeat="no-repeat"
style="background-position: -275px -165px;"></image></pattern>

【问题讨论】：

标签： javascript css d3.js svg

【解决方案1】：

不要在模式中设置background-position，而是设置x 和y 位置：

.attr("x", function(d) {
    if (cCodeToPos(d.code))
        return cCodeToPos(d.code).split(" ")[0];
}).attr("y", function(d) {
    if (cCodeToPos(d.code))
        return cCodeToPos(d.code).split(" ")[1];
});

这是您更新后的 Pen：http://codepen.io/anon/pen/bBzydG?editors=0010

【讨论】：