Добавить фоновое изображение в круг SVG - PullRequest
Новая
       5

Добавить фоновое изображение в круг SVG

0 голосов
/ 04 марта 2020

Я хочу добавить фоновое изображение в круг SVG. Но я не могу заставить его работать. Вот что у меня есть:

ВНОВЬ РЕДАКТИРОВАТЬ:

Теперь это то, что у меня есть. И это почти работает: 

    // SVG -> G with margin convention
    var svg = d3.select('.clock').append('svg');
    var g = svg.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // Clock Face
    var face = g.append('g')
      .datum(clock)
      .attr('transform', 'translate(' + w / 2 + ',' + r + ')');

    const svgInner = face.append('svg')
    .attr({
      height: function (d) { return (d.r * 2); },
      width: function (d) { return (d.r * 2); },
    });

    svgInner.append('circle')
    .attr({
    r: function (d) { return d.r; },
    fill: 'url(#image)',
    height: function (d) { return (d.r * 2); },
    width: function (d) { return (d.r * 2); },
    });

    svgInner.append('defs')
    .append('pattern')
    .attr('id', 'image')
    .attr('width', function (d) { return (d.r * 2); })
    .attr('height', function (d) { return (d.r * 2); })
    .attr('patternContentUnits', 'objectBoundingBox')
    .append('image').attr({
      transform: 'translate(-63, -63)',
    })
    .attr({
      height: function (d) { return (d.r * 2); },
      width: function (d) { return (d.r * 2); },
      'xlink:href': 'image.jpg',
    });

Единственное, что мне нужно исправить, это положение изображения (оно должно быть по кругу, но оно перемещено в нижний правый угол, как вы можете видеть на изображение. enter image description here

...