为什么添加正的视图框min-x，min-y值会带来负面的转换效果? [英] Why does adding a positive viewbox min-x, min-y value have a negative translate effect?

问题描述

我只是通过 这 小提琴，代码看起来像下方:

I was just going through THIS fiddle and the code looks like below:

<svg width=200 height=200 viewbox="0 0 225 225" >
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 220
            Z"
    fill = "lightskyblue">
    </path>
</svg>

现在，当我使用视图框并将值更改为viewbox="100 100 225 225"时，它具有执行以下操作的作用:

Now when i play around with the viewbox and change the value to viewbox="100 100 225 225" it has the effect of doing something like:

transform:translate(-100px, -100px);

好吧，我相信当我将100指定为min-x, min-y时，将viewbox的值设置为

Well i believe when i specify 100 as the min-x, min-y the values of viewbox the effect should have been something like

transform:translate(100px, 100px);

但是效果类似于:

transform:translate(-100px, -100px);

为什么这样?有人可以解释吗?

Why so ? can somebody explain ?

推荐答案

通过将minX和minY设置为100，您正在做的就是告诉SVG渲染器SVG的左上角从(100,100)开始.那一点应该在SVG视口的左上方.

By setting minX and minY to 100, what you are doing is telling the SVG renderer that the top left of your SVG starts at (100,100). And that point should be at the top left of the SVG viewport.

与您确定标尺从10厘米处开始一样. 12厘米标记似乎是2厘米而不是12厘米.换句话说，距离左下10厘米.

It is the same as if you decided your ruler started at the 10cm mark. The 12cm mark would appear to be at 2cm instead of 12cm. In other words 10cm further left (lower).

看看下面的示例SVG.我已经标记出一个区域，我们将在后面的示例中将其设置为视口和viewBox.

Have a look at the following sample SVG. I've marked out an area which we will make set the viewport and viewBox to in a later example.

<svg width="600" height="600">

  <!-- mark the area that will become the viewport -->
  <rect x="100" y="100" width="300" height="200" fill="linen"/>

  <!-- add some other content -->
  <circle cx="120" cy="120" r="20" fill="red"/>
  <circle cx="200" cy="200" r="50" fill="red"/>
  <circle cx="380" cy="270" r="50" fill="red" fill-opacity="0.3"/>

</svg>

如果我们现在将viewBox设置为米色区域并相应地设置视口(SVG width和height)，您将看到发生的情况.

If we now set the viewBox to the cream coloured area and set the viewport (SVG width and height) correspondingly, you will see what happens.

<svg width="300" height="200" viewBox="100 100 300 200">

  <!-- mark the area that will become the viewport -->
  <rect x="100" y="100" width="300" height="200" fill="linen"/>

  <!-- add some other content -->
  <circle cx="120" cy="120" r="20" fill="red"/>
  <circle cx="200" cy="200" r="50" fill="red"/>
  <circle cx="380" cy="270" r="50" fill="red" fill-opacity="0.3"/>

</svg>

您会看到大约100,100的红色小圆圈现在位于视口的左上方.

You can see that the small red circle which is roughly at 100,100, is now at the top left of the viewport.

希望这会让您更清楚.

这篇关于为什么添加正的视图框min-x，min-y值会带来负面的转换效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！