Javascript svg+Sprite sheet+d3+clipPath+位置+大小

需要提前道歉：因为时间太长和我的无知。我试图教自己一些新概念：d3.js和sprite表单。精灵表的概念很容易理解，但我不知道如何将其集成到d3中。基本上，我想做的是从sprite工作表中选择我想用作图像的sprite，然后使用d3在页面上的其他地方显示所选sprite，很可能是同一sprite的多个副本

实际的精灵表供参考，请参见下面的免责声明：

以下是问题： 1我将精灵表添加到我的html中，现在是硬代码，这将显示我想要的特定精灵，但是精灵的尺寸/位置与显示整个精灵表一样。我怎样才能只捕捉精灵本身，而不只是隐藏未使用的精灵？在下图中，我想在d3鼠标悬停事件第2部分中使用一个图标

修改此示例：

HTML

结果

>

如果有更有效的方法来实现这一点，我愿意接受建议。我只是坚持使用d3模型，因为我已经渲染了一个svg对象，我只需要向它添加一些东西

---

免责声明：图标不是我的作品！我使用这些图标只是为了教育目的。作者的链接在这里：

我不确定示例中发生了什么，但元素的问题是您没有翻译图像，因此您想要的图标位于SVG的0,0点

这就是您需要的：

<svg id="mySvg1" width="100%" height="100%" viewBox="0 0 150 150">
    <defs>
        <clipPath id="c">
            <rect x="135" y="0" width="150" height="150"/>
        </clipPath>
    </defs>
        <image transform="translate(-135,0)" width="550" height="420" 
            xlink:href="static/img/iconSheet.png" clip-path="url(#c)"/>
<svg>

---

当然，如果您使用的是d3，您可能会得到一些数据变量来告诉您使用哪个图标，而不是类，但您知道了。我认为一种更简单的剪裁和定位图标的方法是使用一个嵌套的视图框

---

顺便说一句，如果你在精灵中使用SVG的唯一原因是想使用d3，请记住，你也可以使用d3添加HTML元素，并将它们的类设置为触发CSS背景图像；甚至可以直接使用.style.html设置CSS属性。感谢您提供了非常全面的答案。你仔细阅读了这些例子，真是太有帮助了。我在缩放方面仍然有一些问题，但总体而言，我能够以我想要的大小向svg画布添加图标。图标的缩放方式并不直观。人们会期望图标相对于本机图像分辨率进行缩放，但它显然不一定是这样工作的。不管怎样，你给了我足够的信息让我继续学习和应用这些概念。非常感谢。缩放和SVG需要一段时间才能适应。请记住，绘制SVG的所有内容都是为了使SVG viewBox维度中的一个像素等于一个单位。因此，比例因子是viewBox高度或宽度与SVG高度或宽度之间的比率。使用哪一个取决于保存Aspectratio。如果将viewBox设置为大于图标尺寸，则图标将无法填充整个SVG大小。如果使viewBox小于图标尺寸，图标将被裁剪。字体大小示例：

<svg id="mySvg" width="550" height="420">
  <defs id="mdef">
    <pattern id="image" x="0" y="0" height="550" width="420">
      <image transform="scale(1.0)" x="0" y="0" width="550" height="420" xlink:href="static/img/iconSheet.png"></image>
    </pattern>
  </defs>
</svg>

var svgContainer = d3.select("div#content-main").append("svg")
                                    .attr("width", 740)
                                    .attr("height", 760)
                                    .attr("class", "mySvg")
                                    .style("border", "none");

svgContainer.append("rect")
         .attr("class", "logo")
         .attr("x", 0)
         .attr("y", 0)
         .attr("width", 550)
         .attr("height", 420)
         .style("fill", "transparent")  
         .style("stroke", "black")     
         .style("stroke-width", 0.25)     
         .on("mouseover", function(){ 
               d3.select(this)
                   .style("fill", "url(#image)");
         })
          .on("mouseout", function(){ 
               d3.select(this)
                   .style("fill", "transparent");
         });

<svg id="mySvg1" width="100%" height="100%" viewBox="0 0 150 150">
    <defs>
        <clipPath id="c">
            <rect x="135" y="0" width="150" height="150"/>
        </clipPath>
    </defs>
        <image transform="translate(-135,0)" width="550" height="420" 
            xlink:href="static/img/iconSheet.png" clip-path="url(#c)"/>
<svg>

<svg class="icon-defs">
  <defs>
    <!-- The icons are defined in an SVG <defs> element;
        it could be in a different file,
        since the icons will be referenced by url. -->

    <!-- One clipping path defines icon size -->
    <clipPath id="icon-cp" >
        <rect x="0" y="0" width="150" height="100" />
    </clipPath>

    <!-- One image element imports the file -->
    <image id="icon-sprite" width="969" height="293" 
           xlink:href="http://i.stack.imgur.com/TPx5h.png" />

    <!-- Each icon fragment uses the same image 
         with a different translation -->
    <g id="icon1" clip-path="url(#icon-cp)">
        <use xlink:href="#icon-sprite" 
            transform="translate(0,0)" />
    </g>
    <g id="icon2" clip-path="url(#icon-cp)">
        <use xlink:href="#icon-sprite" 
            transform="translate(-240,0)" />
    </g>
    <g id="icon3" clip-path="url(#icon-cp)">
        <use xlink:href="#icon-sprite" 
            transform="translate(-240,-193)" />
    </g>   
 </defs>

<svg class="icon" viewBox="0 0 150 100" height="4em" width="6em">
        <use xlink:href="#icon3"/>
</svg>

d3.selectAll(".warning")
    .append("svg")
      .attr("viewBox", "0 0 "+ iconWidth + " " + iconHeight)
      .style("display", "inline")
      .style("height", "1em")
      .style("width", (iconWidth/iconHeight) + "em")
    .append("use")
      .attr("xlink:href", "#warning");