CSS变换缩放功能自动移动SVG项目位置

Question

我正在制作一个圆形格式的导航栏，分成 5 个。所有元素都是 SVG。 它真的看起来像一个饼图。当悬停一个部分时，我想将 svg 元素缩放到外部。当我尝试对此使用比例时，该元素只是进一步转换自身并产生比例效果。我不确定，但我认为这是重叠 css 元素的问题？无论如何，如果有人可以帮助我如何告诉零件留在同一个地方然后扩大规模，还是我需要在正确的地方手动重新翻译元素？ 谢谢，这里是一个repretation：

#group-part-1>text {
    visibility: hidden;
  }

  #group-part-1:hover text {
    visibility: visible;
  }

  #group-part-2>text {
    visibility: hidden;
  }

  #group-part-2:hover text {
    visibility: visible;
  }

  #group-part-3>text {
    visibility: hidden;
  }

  #group-part-3:hover text {
    visibility: visible;
  }

  #group-part-4>text {
    visibility: hidden;
  }

  #group-part-4:hover text {
    visibility: visible;
  }

  #group-part-5>text {
    visibility: hidden;
  }

  #group-part-5:hover text {
    visibility: visible;
  }

  #part-1:hover {
    fill: red;
    transform: scale(1.2);
  }

  #part-2:hover {
    fill: green;
    transform: scale(1.2);
  }

  #part-3:hover {
    fill: purple;
  }

  #part-4:hover {
    fill: orange;
  }

  #part-5:hover {
    fill: blue;
  }

<svg width="210" height="297" viewBox="0 0 210 297" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="example">
    <g id="group-part-5">
      <path id="part-5"
        d="M156.393 107.998C159.608 118.055 159.557 128.873 156.247 138.899C152.936 148.926 146.536 157.647 137.964 163.813L108.768 123.223L156.393 107.998Z"
        fill="black" stroke="black" stroke-width="0.0132292" />
      <text x="160" y="150" fill="black">Project</text>
    </g>
    <g id="group-part-4">
      <path id="part-4"
        d="M137.963 163.813C129.391 169.979 119.087 173.272 108.529 173.222C97.9698 173.171 87.6979 169.78 79.1853 163.532L108.768 123.223L137.963 163.813Z"
        fill="#1A1A1A" stroke="black" stroke-width="0.0132292" />
      <text x="90" y="200" fill="black">About</text>
    </g>

    <g id="group-part-3">
      <path id="part-3"
        d="M79.2054 163.547C70.6897 157.304 64.3689 148.526 61.1491 138.469C57.9293 128.413 57.9756 117.596 61.2815 107.568L108.768 123.223L79.2054 163.547Z"
        fill="#333333" stroke="black" stroke-width="0.0132292" />
      <text x="10" y="150" fill="black">Contact</text>
    </g>

    <g id="group-part-2">
      <path id="part-2"
        d="M61.2928 107.534C64.606 97.508 71.008 88.7885 79.5814 82.625C88.1547 76.4615 98.4593 73.1703 109.018 73.2231L108.768 123.223L61.2928 107.534Z"
        fill="#4D4D4D" stroke="black" stroke-width="0.0132292" />
      <text x="25" y="75" fill="black">Home</text>
    </g>

    <g id="group-part-1">
      <path id="part-1"
        d="M108.941 73.2228C119.5 73.2594 129.776 76.6378 138.297 82.8738C146.818 89.1097 153.146 97.8831 156.374 107.937L108.768 123.223L108.941 73.2228Z"
        fill="#666666" stroke="black" stroke-width="0.0132292" />
      <text x="150" y="75" fill="black">Work</text>
    </g>
</svg>

thanks 

Answer 1

我会这样做：

1. svg 元素以点 {x:0,y:0} 为中心：viewBox="-105 -105 210 210"

2. 我根据楔的角度和圆的半径计算圆弧的点

3. 在此示例中，我也旋转了文本，因此我将楔形和文本放在同一个组中 (#group_part5)，并在鼠标悬停时转换组：transform: translate(10px, 0) scale(1.2);

4. 我将所有内容包装在不同的组 (#example) 中，并将该组旋转到所需的位置。

//the angle for the circle wedge
let angle = 2*Math.PI/5;
//the radius of the circle wedge
let r = 60;
//calculate the points for the arc
let p1 = {x:r*Math.cos(-angle/2),
          y:r*Math.sin(-angle/2)};

let p2 = {x:r*Math.cos(angle/2),
          y:r*Math.sin(angle/2)};
//build the d attribute
let d = `M0,0L${p1.x},${p1.y}A${r},${r} 0 0 1 ${p2.x},${p2.y} z`;
//set the d attribute of the path
part5.setAttribute("d",d);

svg {
  border: solid;
}

#example {
  transform: rotate(36deg);
}

#group_part5:hover {
  fill: red;
  transform: translate(10px, 0) scale(1.2);
}

#group_part5:hover text {
  fill: black;
}

<svg width="210" viewBox="-105 -105 210 210">
  <g id="example">
    <g id="group_part5">
      <path id="part5" d="" />
      <text fill="none" x="30">Project</text>
    </g>
  </g>
</svg>

观察：如果您不想使用 javascript，您可以从检查器中获取路径的 d 属性。

更新

OP 正在评论

唯一的问题是'原点'左上角正在移动，我希望它和边框一样保持在同一个地方，只需要更长的边框和更远的圆形外边框

如果我在之前的演示中理解正确，请将transform: translate(10px, 0) scale(1.2); 替换为transform: scale(1.2);

如果这是您需要的，有一种更简单的方法可以做到这一点：您可以添加一个宽笔画 - 与填充颜色相同 - 代替或缩放楔形 - 就像下面的演示一样：

请看一下：

svg {
  border: solid;
}

#example {
  transform: rotate(36deg);
}

#group_part5:hover {
  fill: red;
  /*transform: translate(10px, 0) scale(1.2);*/
}

#group_part5:hover path:nth-of-type(2){stroke:red;}

#group_part5:hover text {
  fill: black;
}

<svg width="210" viewBox="-105 -105 210 210">
  <g id="example">
    <g id="group_part5">
      <path id="part5" d="M0,0L48.54101966249685,-35.26711513754839A60,60 0 0 1 48.54101966249685,35.26711513754839 z"></path>
      <path d="M48.54101966249685,-35.26711513754839A60,60 0 0 1 48.54101966249685,35.26711513754839" fill="none" stroke-width="10"></path>
      <text fill="none" x="30">Project</text>
    </g>
  </g>
</svg>