如何在SVG中定义具有无理坐标的点？

Question

假设我想在svg中绘制一个sqare,其对角线为1.这意味着正方形的边长度为a = 1/sqrt(2).方形的顶点的坐标,然后将是:(0,0),(0,a),(a,0)和(a,a).当然我可以a用十进制数近似并使用这个数字.但是,如果我希望顶点在数学上是精确的,例如因为我希望它们完全在某条线上,我知道要经过预期的点？

我是SVG的新手.我正在阅读这里的转换,希望得到一些指示,但它让我感到困惑.

有谁知道这是否可以做到,如果可以,怎么做？

Answer 1

SVG 不支持这样的东西。

但是您会从浮点近似中获得非常好的精度。渲染 SVG 后，不会有很多情况下您会看到错误，除非您将其放大很多。

如果 svg 嵌入在网页中 - 如果您在高放大率下发现错误 - 您可以考虑使用 JavaScript 动态修改 SVG，而不是应用 SVG 转换。

Answer 2

@ PeterHall的回答是正确的,你应该接受它.SVG没有此功能.

请注意,浮点精度的每个额外小数位都会为您提供额外的10倍缩放.假设viewBox宽度为2000px且宽度仅为2的高分辨率屏幕.在这种不太可能的情况下,三位小数足以唯一地识别屏幕上的每个像素.当点从一个像素移动到下一个像素时,额外的小数位会给出10度的细微抗锯齿.所以让我们从4位小数开始.

此时,浮点数至少有12 个精度小数位.我似乎不太可能会创建一个需要或允许放大1 万亿倍的交互式SVG .

我完全理解你的纯粹欲望.可悲的是,SVG不支持它.令人高兴的是,SVG提供的实用,实用的替代方案应该能够充分满足您的需求.

Answer 3

SVG 不支持无理数输入，但这并不意味着不可能有无理数输入。由于平移和旋转的能力，可以创建任何可构造的数字。因为1/sqrt(2) 是可构造的，所以才有可能做到。

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<rect x="0" y="0" width="1" height="1" fill="#DDD"/>
	<symbol id="rectangle">
		<path d="M0 0.5 0.5 0 1 0.5 0.5 1" fill="#000"/>
	</symbol>
	<use xlink:href="#rectangle" transform="rotate(45) translate(0, -0.5)"/>
</svg>