Why does adding a positive viewbox min-x, min-y value have a negative translate effect?

Question

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>

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

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

But instead the effect is something similar to:

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

Why so ? can somebody explain ?

Answer 1

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.

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

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>

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>

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

Hope this makes it clearer for you.