Question

我正在玩下面的SVG：

＆＃13;

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

＆＃13;

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

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

Answer 1

我认为确定值的最佳方法是在圆圈上运行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>

Answer 2

现在我想知道的是cx，cy和r ??中25的实际值是多少？这三个都是25 * 2 = 50 ??

没有。你的SVG不像viewBox那样方形。所以SVG的内容不是简单地缩放2倍。

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

最终结果将是一个占据区域（0,50）到（100,150）的圆圈。

因此，您可以说cx，cy，r的有效转换值为50，100，50。< / p>

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

viewBox中没有“继承”。 viewBox，width和height的互动会产生initial coordinate system转换。该变换会影响SVG中对象的比例和位置。

viewBox的哪些值在圆的cx，cy和r中继承

2 个答案: