这是我的第一个问题,如果我搞砸了,我深表歉意。
我正在使用 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
如果需要的话:)
感谢您的宝贵时间!
最佳答案
In SVG , viewBox 是驼峰式的,但是你输入的是 viewbox:
const svg2 = d3.select(this.svgContainerRef2.nativeElement)
.append('svg')
.attr('viewBox', `0 0 ${circleRadius * 2} ${circleRadius * 2}`);
关于Angular - 缩放在代码中创建的内联 d3 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63916870/