主页 / 问题 / 964903
Accepted
kizoso
Asked:2020-04-03 16:25:45 +0000 UTC2020-04-03 16:25:45 +0000 UTC

如何将多个 svg 合并到一个画布中

  • 772

如何以最简单正确的方式将多个 svg 合并为一个 svg？
例如，我有这个 svg 集：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="20" width="20">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
</svg>

<br>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867" height="20" width="20">
  <path
      fill="#efce4a"
      d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
</svg>

但我需要一个完整的 svg 而不是十个 svg。像这样的东西：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.867 53.867" height="50" width="150">

  <g height="20" width="20" x="0" y="0">
  <path fill="#efce4a"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" h="0" y="30">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="60">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="90">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>
  <g height="20" width="20" x="0" y="120">
    <path fill="#efce4a"
          d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>
  </g>

  <br>

  <g height="20" width="20" x="30" y="0">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="30">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="60">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="90">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
  <g height="20" width="20" x="30" y="120">
    <path
        fill="#efce4a"
        d="M11.287 54.548a.997.997 0 0 1-.985-1.169l3.091-18.018L.302 22.602a1.001 1.001 0 0 1 .555-1.705l18.09-2.629 8.091-16.393a.996.996 0 1 1 1.792 0l8.09 16.393 18.091 2.629a1.002 1.002 0 0 1 .555 1.705L42.475 35.363l3.09 18.017c.064.375-.09.754-.397.978a.993.993 0 0 1-1.054.076l-16.18-8.506-16.182 8.506a1.008 1.008 0 0 1-.465.114zM3.149 22.584l12.016 11.713a1 1 0 0 1 .287.885L12.615 51.72l14.854-7.808a.996.996 0 0 1 .931 0l14.852 7.808-2.836-16.538a1 1 0 0 1 .287-.885l12.016-11.713-16.605-2.413a1 1 0 0 1-.753-.547L27.934 4.578l-7.427 15.047a1 1 0 0 1-.753.547L3.149 22.584z"/>
  </g>
</svg>

svg

2 个回答

  1. Best Answer

    • svg 元素被重复，因此可以使用<use>.

    • 由于 svg 画布的尺寸viewBox是为一个 svg 图形设计的，因此在原始示例中，需要增加画布的大小以包含两排星星，一行五颗星星。

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 135" width="120" height="50">

    在原始示例中，第二行的星星是用双轮廓绘制的，因此无法使用 css 规则重新着色它们。见下图

    在此处输入图像描述

    因此，我为两行选择了相同的星星，但具有不同的着色属性。

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 135"  width="120" height="50">
  <defs>
    <path id="star_Y" fill="#efce4a" stroke="#efce4a" stroke-width="2"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/> 
	 <path id="star_W" stroke="#efce4a" stroke-width="2" fill="none"
        d="M26.934 1.318l8.322 16.864 18.611 2.705L40.4 34.013l3.179 18.536-16.645-8.751-16.646 8.751 3.179-18.536L0 20.887l18.611-2.705z"/>	
     
  </defs>
  <!-- Первый ряд звёзд -->
  <use xlink:href="#star_Y" x="-90" />
    <use xlink:href="#star_Y" x="-30" />
	 <use xlink:href="#star_Y" x="30" />
	   <use xlink:href="#star_Y" x="90" />
	    <use xlink:href="#star_Y" x="150" />  
		
      <!-- Второй ряд звёзд -->
  <use xlink:href="#star_W" x="-90" y="60" />
    <use xlink:href="#star_W" x="-30" y="60" />
	 <use xlink:href="#star_W" x="30" y="60"/>
	   <use xlink:href="#star_W" x="90" y="60" />
	    <use xlink:href="#star_W" x="150" y="60" />   
</svg>

    • 5

  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})`);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="640" height="175"></svg>

    PS：正如 Alexandr_TT 在评论中正确指出的那样，我们应该添加一个指向此处用于创建星号的字符生成器的链接d3-shape#symbol

    • 4

相关问题