视框的哪些值在圆的 cx、cy 和 r 中继承

我只是在玩下面的SVG：

<svg width="100" height="200" viewBox="0 0 50 50" style="border: 1px solid #cccccc;">
  <circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;" />
</svg>

现在，视图框中的宽度为50

，高度为50。与视图框中的宽度成比例的是实际宽度的 2 个单位，即 100/50 = 2，高度是实际高度的4个单位，即 200/50 = 4 .

现在我想知道的是 25 在cx、cy和r内的实际值是多少？这三个都25*2 = 50吗？ 3 个中的任何一个不是从视框的高度继承的吗？如果不是.. 为什么不呢？

现在我想知道的是 cx、cy 和 r 内部 25 的实际值是多少？这三个都是 25*2 = 50 吗？

不。您的 SVG 不像 viewBox 那样是方形的。因此，SVG 的内容不是简单地缩放 2 倍。

正如您在查看 SVG 时所看到的那样。圆在 100x200 视口中垂直居中。使用默认缩放规则(可以使用 preserveAspectRatio 属性进行更改(，内容将放大到宽度和高度的最小值。在这种情况下，这就是宽度。然后圆变得垂直居中，因为高度大于宽度。

最终结果将是一个圆，该圆占据从 (0,50( 到 (100,150( 的区域。

所以你可以说cx、cy、r的有效变换值是50、100、50。

这 3 个中的任何一个不是从视图框的高度继承的吗？？如果不是..为什么不呢？

没有任何东西从视图框"继承"。 viewBox、width和height的相互作用导致初始坐标系变换。该变换会影响 SVG 中对象的比例和位置。

我相信确定值的最佳方法是在圆上运行 getBBox((，如下所示：

<!DOCTYPE HTML>
<html>
<head>
  <title>ViewBox</title>
</head>
<body onload=showBB()>
<svg width="100" height="200" viewBox="0 0 50 50" style="border: 1px solid #cccccc;">
  <circle id=myCircle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;" />
</svg>
<script>
function showBB()
{
  var bb=myCircle.getBBox()
  var bbx=bb.x
  var bby=bb.y
  var bbw=bb.width
  var bbh=bb.height
  var cx=bbx+5*bbw
  var cy=bby+5*bbh
  var r=.5*bbw
  console.log("r="+r+" cx="+cx+" cy="+cy)
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：