Question

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

我是SVG的新手。我正在阅读转换here，希望得到一些指示，但它让我感到困惑。

有谁知道是否可以这样做，如果可以，怎么做？

Answer 1

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

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

此时，浮点数至少有12个更多小数位数。我似乎不太可能会创建一个交互式SVG，要求或允许放大1 万亿。

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

Answer 2

SVG不支持此类内容。

但是你可以通过浮点近似获得相当好的精度。在渲染SVG时，您将看到错误的情况不会很多，除非您放大很多。

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

Answer 3

SVG不支持无理数的输入，但这并不意味着不可能拥有它们。由于能够翻译和旋转，因此可以创建任何constructible number。由于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>

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

3 个答案: