Angular

Question

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

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

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

检查 SVG 时，我看到它占用了 width 和 height 指定的 100px，但 SVGElements 本身仍然是原始大小.

但是！如果不是通过代码设置 width 和 height，而是通过将 SVG 编辑为 Dev Tools 中的 HTML 来修改 width 和 height （即：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}`);

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