在 SVG 定义的视口内绘制多边形

Question

我分别定义了 svg 580 和 707 视口的宽度和高度。 viewBox 的宽度和高度定义为 450 和 600。在 svg 中，我绘制了一些响应式多边形，这些多边形由用户给出，并立即使用 d3 渲染多边形。

例如，如果用户给定的输入足够大以绘制超出视口宽度的多边形，则在宽度内分配的部分将显示到网页，其余部分则不显示。如何在我定义的视口内渲染整个多边形？

更新：这里是 jsfiddle 链接：https://jsfiddle.net/riad1380/ww1xpnxy/

var viewBoxWidth = 580;
var viewBoxHeight = 707;

例如，如果用户给出 350 的半径值，它会在视口之外渲染，但我想在视口内绘制圆，而不考虑给定的半径，并且半径为 10 的圆应该被视为小于 100。

p>

Answer 1

您需要更新 viewBox，使其涵盖 SVG 中的所有内容。

因此，如果用户输入 350 的半径，如果您希望整个圆可见，则 viewBox 的宽度和高度值至少需要为 700。根据圈子的位置（cx 和 cy），您可能还需要更新 viewBox 的 x 和 y 值。