如何把一个svg中的部分内容拷贝到另一个svg中间位置

trust2018

发布于
2022-02-25

比如，把这个svg中的rect拿出来拷贝到另一个svg的中间位置

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>

</svg>

svg 前端

阅读 2.2k

2 个回答

东郭皮蛋

https://codepen.io/brendanfic...

<body>
  <svg id="svg1"  style="border: 1px solid red;" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
    <rect x="10" y="10" transform="translate(20, 20)" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
  </svg>
  <svg id="svg2" style="border: 1px solid blue;" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" version="1.1">
  </svg>
  <button onclick="copyRect()">copyRect</button>
  <script>
    function copyRect() {
      const rect = document.querySelector('#svg1 rect').cloneNode()
      const svg2 = document.querySelector('#svg2')
      let scale = 0.5
      let x = (svg2.clientWidth / 2) - (rect.width.baseVal.value * scale / 2)
      let y = (svg2.clientHeight / 2) - (rect.height.baseVal.value * scale / 2)
      rect.x.baseVal.value = 0
      rect.y.baseVal.value = 0
      rect.setAttribute('transform', `translate(${x},${y}) scale(${scale})`)
      svg2.appendChild(rect)
    }
  </script>
</body>