我创建了一个单独的jsbin:http://jsbin.com/vokoyisofo/edit?html,css,output
您可以看到四个三角形相互渲染。每个三角形比前一个小10%。包含SVG是300x300。我希望所有的东西都呈现出方形,但这种情况不会发生。我假设有某种屏幕拉伸发生。每个三角形的底部边框之间的空间看起来比顶部尖端之间的空间大得多。
我如何纠正这个?
答案 0 :(得分:1)
从外三角形的顶部顶点到下一个最大顶点的顶部顶点的距离是30个单位。
从外三角形的右下角顶点到下一个最大的一个的右下角顶点的距离不是30个单位。它是√(30 * 30 + 30 * 30)单位或大约42个单位。
这就是为什么形状在垂直轴上只是对称的原因。它看起来很歪斜,因为这就是你定义它的方式。
如果您希望它是对称的,您希望底部顶点在三角形中心的方向上进入30个单位,这意味着它们在x和y的每一个中减少30 /√2个单位