主页 / 问题 / 1162620
Accepted
Leks
Asked:2020-08-06 04:33:35 +0000 UTC2020-08-06 04:33:35 +0000 UTC

如何立即指定 SVG 元素的旋转中心坐标？

  • 772
  1. 将圆的坐标放在中心只能通过选择来获得 transform='rotate(-90 60 60)'
  2. 如何在不选择的情况下立即将圆的坐标放在中心？

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 120 120" >
  <!-- Фон серого цвета -->
  <rect x='0' y='0' width='100%' height='100%' fill='grey'/>
  <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
  <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314; 0'
  />
  </circle>
  <text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text>
</svg>

javascript

1 个回答

  1. Best Answer

    要确定大小，使用 JS getBBox()方法

    MDN 网络文档

    getBBox()允许我们确定放置对象的最小盒子的坐标。返回的坐标是相对于 svg 的当前空间的，即在所有几何属性都已应用于目标元素中包含的所有元素之后。

    换句话说，我们可以获得描述圆的矩形左上角的 (x,y) 坐标，在您的示例中
    ，该矩形的宽度和高度为width。height

    计算圆心坐标

    let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)

    下面是一个完整的例子

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 120 120" >
  <!-- Фон серого цвета -->
  <rect x='0' y='0' width='100%' height='100%' fill='grey'/>
  <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
  <circle id="circ" r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314; 0'
  />
  </circle>
  <text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text>
</svg> 
<script> 
let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)
</script>

    • 2

相关问题