缩放SVG坐标，但不缩放元素

Question

我有一堆<circle>元素，我想放大它们。

我想离开这个：

对此：

请注意，我不放大圈子，只放大圈子之间的距离。

我怎样才能有效地做到这一点？我现在正在做的是在每个圆圈上单独设置cx和cy坐标。这有效，但是当我有数千个圈子时它很慢。

我可以将它们全部放在<g>中并使用transform: scale(x);进行缩放。这要快得多，但它会缩放圆的距离和大小。

有没有办法可以独立于圆半径来缩放坐标？我可以以相对于屏幕尺寸的单位指定圆半径吗，例如？

我正在使用d3，但任何解决方案都表示赞赏。

Answer 1

最简单的方法IMO是使用带有圆形端盖的零长度线来形成您的圆圈。您可以使用stroke-width设置直径。然后，您可以使用vector-effect: non-scaling-stroke来防止它们在放大SVG时缩放。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect

大多数现代浏览器都支持

vector-effect。

svg {
  background-color: black;
}

path {
  fill: none;
  stroke: #ccc;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


path:nth-child(3) {
  stroke: plum;
}

<svg width="100" viewBox="0 0 100 100">
  <path d="M 20,20 h 0"/>
  <path d="M 20,40 h 0"/>
  <path d="M 30,50 h 0"/>
</svg>



<svg width="200" viewBox="0 0 100 100">
  <path d="M 20,20 h 0"/>
  <path d="M 20,40 h 0"/>
  <path d="M 30,50 h 0"/>
</svg>