角度-缩放在代码中创建的内嵌d3 SVG

问题描述

这是我在这里的第一个问题，因此，如果我搞砸了，我表示歉意。

我正在使用d3库在Angular中构建一个简单的SVG，但我无法进行扩展。

我在https://css-tricks.com/scale-svg/上对SVG进行了大量阅读，我选择采用在viewBox内构建SVG，然后应用width和{ {1}}个属性。

检查SVG时，我发现它占用了height和100px的指定width，但是height本身仍然是原始大小。 / p>

但是！如果不是通过代码设置SVGElements和width，而是通过在height中将SVG编辑为HTML来修改width和height（即：{ {1}}），然后完美缩放！

我在这里做了个pl：https://plnkr.co/edit/kYcTocJzi6eA59Yj?preview-第一个SVG通过代码设置了Dev Tools和width="100px" height="100px"，而第二个SVG没有设置它们，因此您可以如果需要，可以在width中进行尝试：）

感谢您的时间！

解决方法

In SVG， viewBox 是驼峰式的，但是您键入了视图 b ox：

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