Как объединить несколько svg в один холст

#svg #svg_спрайт

Как объединить несколько svg в один svg наиболее простым и правильным способом?
Например, у меня есть вот такой набор svg:





















Но мне нужно, чтобы вместо десяти svg у меня это была один целый svg. Что-то вроде
такого:






  
    
  
  
    
  
  
    
  
  
    
  
  
    
  




    

Ответы

Ответ 1

Элементы svg повторяются, поэтому их можно клонировать с помощью
команды .
Так как размеры полотна svg и viewBox рассчитаны на одну фигуру
svg, в исходном примере, то поэтому их необходимо увеличить размеры
полотна, чтобы входило два ряда звездочек по пять звёзд в одном ряду.




Ответ 2

Я конечно понимаю, что это не по теме, я только хотел показать насколько просто иногда
рисовать при помощи d3 =)



let row = 20, pad = 30, hover;

let d = Array(100).fill(0).map((d, i) => ({
  color: `hsl(${i*3}, 66%, 66%)`,
  i: i,
  x: pad/2 + (i%row)*pad,
  y: pad/2 + Math.floor(i/row)*pad
}));

let stars = d3.select('svg')
  .selectAll('path')
  .data(d)
  .enter()
  .append('path')
  .attr('d', d3.symbol().size(300).type(d3.symbolStar))
  .attr('fill', d => d.color)
  .attr('fill-opacity', 1)
  .attr('stroke', d => d.color)
  .on('mousemove', hoverFun)
  .on('mouseover', hoverFun)
  .on('click', d=>console.log(d.color))

function hoverFun(d) {
  if (hover && this === hover.node())
    return;
  hover && hover.transition().duration(200).attr('fill-opacity', 1)
  hover = d3.select(this);
  hover.transition().duration(100).attr('fill-opacity', 0)
}

requestAnimationFrame(draw);

function draw() {
  requestAnimationFrame(draw);
  stars.each(d => d.i += 1)
       .attr('transform',  d => `rotate(${d.i} ${d.x},${d.y}) translate(${d.x}, ${d.y})`);
}






PS: Как правильно заметил Alexandr_TT в комментариях, надо бы добавить ссылку на
генератор символов, который тут использован для создания звездочки d3-shape#symbol