Angular - 缩放在代码中创建的内联 d3 SVG

Question

这是我的第一个问题，如果我搞砸了，我深表歉意。

我正在使用 d3 库在 Angular 中构建一个简单的 SVG，但我无法缩放它。

我在这里阅读了大量关于 SVG 的文章 https://css-tricks.com/scale-svg/我选择了在 viewbox 中构建 SVG 的方法，然后应用 width 和 height 属性。

检查 SVG 时，我发现它占用了指定的 100px 的 width 和 height，但是 SVGElements 本身还是原来的大小。

但是!如果不是通过代码设置 width 和 height，而是通过编辑 SVG 修改 width 和 height作为 Dev Tools 中的 HTML(即:width="100px"height="100px")，然后它可以完美缩放!

我在这里做了一个 plunker:https://plnkr.co/edit/kYcTocJzi6eA59Yj?preview - 第一个 SVG 通过代码设置 width 和 height，而第二个 SVG 没有设置它们，因此您可以在 Dev Tools 如果需要的话:)

感谢您的宝贵时间!

Answer 1

In SVG , viewBox 是驼峰式的，但是你输入的是 viewbox:

const svg2 = d3.select(this.svgContainerRef2.nativeElement)
  .append('svg')
  .attr('viewBox', `0 0 ${circleRadius * 2} ${circleRadius * 2}`);