svg + лист спрайтов + d3 + clipPath + позиция + размер

Я не уверен, что происходит с примером <pattern>, но проблема с вашим элементом <image> заключается в том, что вы не переводите изображение так, чтобы нужный значок находился в точке (0,0) SVG.

Это то, что вам нужно:

<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>

Конечно, если вы собираетесь делать много иконок и использовать их в разных местах, я бы посоветовал:

1. определение значков в элементе <defs>, а затем обращение к ним при необходимости с элементами <use>;
2. использование элемента <use> для позиционирования изображения в каждом значке, поэтому вам нужно только один раз определить URL-адрес, высоту и ширину изображения;
3. вложение каждого элемента изображения/использования в элемент <g> и применение к нему пути отсечения, так что вам нужно определить путь отсечения только один раз (при условии, что все значки имеют одинаковый размер).

Пример здесь: http://codepen.io/AmeliaBR/pen/mwzBD

Код клавиши для определения значков:

<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>

Атрибут viewBox задает внутренние размеры макета изображения и будет одинаковым при каждом использовании значка; высота и ширина могут быть любыми (хотя уменьшение, конечно, будет выглядеть лучше, чем увеличение). Если соотношение высоты и ширины не соответствует значку, он будет сжат или растянут, но вы можете предотвратить это с помощью атрибута preserveAspectRatio.

Теперь на d3. Вероятно, будет проще определить фрагменты SVG, представляющие значки, заранее, возможно, в отдельном файле, хотя вы можете создать этот DOM динамически. Когда вы действительно хотите вставить значок, вы

Например, чтобы добавить встроенное изображение значка в конце каждого элемента с классом «предупреждение», вы должны сделать что-то вроде этого:

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");

Конечно, если вы используете d3, у вас, вероятно, есть некоторая переменная данных, которая говорит вам, какой значок использовать вместо класса, но вы поняли идею.

Я думаю, что гораздо более простой способ обрезать и расположить значок — использовать вложенный <svg> с соответствующим viewBox.

<svg width="100%" height="100%">
                              
    <!-- Repeat this for ever icon instance you want.
         Just change x and y attributes to set position of the icon in your SVG,
         and minX,minY (first two coords) of viewBox to select icon from sprite sheet. -->
    <svg x="0" y="0" width="150px" height="150px" viewBox="135 0 150 150">
        <image width="550px" height="420px" xlink:href="http://i.stack.imgur.com/qAO2h.png" />
    </svg>
  
</svg>