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，而是通过在Dev Tools中编辑SVG作为HTML来修改width和height（即：width="100px" height="100px"），那么它就可以完美地缩放！

我已经在这里制作了一个 Plunker：https://plnkr.co/edit/kYcTocJzi6eA59Yj?preview - 第一个 SVG 通过代码设置了 width 和 height，而第二个 SVG 没有设置它们，以便您可以在需要时尝试使用 Dev Tools :)

感谢您的时间！

- TipTeQ

Answer 1

在SVG中, viewBox应该是驼峰式写法，但您输入了viewbox:

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

- Hugo Elhaj-Lahsen

---

哦我的天啊，我就是那个没发现愚蠢错误的人 :'( 而且我在使用它的其他地方，比如 xMinYMin 时都非常小心！非常感谢 :) - TipTeQ