在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。

Answer 1

您需要更新viewBox，以便它涵盖SVG中的所有内容。

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