如何单独缩放 SVG 元素。

Question

我在 D3 中制作图表，我试图在 window 调整大小时缩放图表的 Y 轴， 不缩放元素的大小 在里面。（而且我不想重新绘制图表）。

换句话说，我希望能够使用 SVG 来缩放对象之间的距离，而不改变对象的大小。

正在阅读 this article 的最后一部分，似乎建议我可以，但我似乎无法正确理解细节。

这是我正在尝试做的事情的简化代码笔： https://codepen.io/thesuperuser/pen/BmdNwz/

<symbol id="circle" width="20" height="20" preserveAspectRatio="none">
  <circle cx="10" cy="10" r=10></circle>
</symbol>

然后我使用这个符号，并尝试使用 d3

保留符号的大小

let svg2 = d3.select('svg.scaled')
svg2.selectAll('use')
  .data(data)
  .enter()
  .append('use')
  .attrs({
    class: 'circle',
    href: '#circle2',
    x: d => scale(d),
    y: '50%',
    height: dotR*2,
    width: dotR*2,
  })

这似乎只是重复了第一个示例中的行为，它按您期望 viewBox 和 preserveAspectRatio 的行为方式缩放大小和距离。

Answer 1

如果您为 svg 元素设置一个 viewBox，它会缩放该 viewBox，包括所有内容以适应视口。你想要的是相反的：一个 svg 元素，其中内容定位可以变化，但没有任何缩放。关键是相对（百分比）单位。

这是一个工作模式：

<svg width="100%" height="200">
  <symbol viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
    <circle id="circle" cx="10" cy="10" r="10" />
  </symbol>
  <use xlink:href="#circle" x="5%" y="50%" width="10%" height="20" />
  <use xlink:href="#circle" x="15%" y="50%" width="10%" height="20" />
  ...
</svg>

这样，当 SVG 的宽度发生变化时，使用元素的视口会改变它们的宽度，但不会改变它们的高度。在它们内部呈现的圆适合恒定高度（只要视口宽大于高）。 preserveAspectRatio="xMid..." 和视口 x 和 width 导致圆的中心位置为 10%、20% ... 根据需要更改这些以定位圆。

这里有一个codepen用d3来演示。

如何单独缩放 SVG 元素。

How to scale SVG elements separately.

svg

viewbox

d3.js