Geek asks and answers

Perplexed SVG viewBox, width, height, etc.

If my understanding of SVG was correct, the following two SVG descriptions will lead to identical images, but this is not the case. (NOTE: The two code lists differ only in the coordinates in the tags svg. More specifically, for each pair (x, y) in the first listing, there is a pair (x-205, y-55) in the second listing.)

<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="0" y="0" width="210" height="60" viewBox="0 0 210 60">

      <g style="stroke: black; fill: none;">
        <path d="M 5 5 Q 105 55 205 55"/>
      </g>

    </svg>

  </body>
</html>


<!DOCTYPE html>
<html>
  <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5">

      <g style="stroke: black; fill: none;">
        <path d="M -200 -50 Q -100 0 0 0"/>
      </g>

    </svg>

  </body>
</html>

, , Firefox, -. , , - , Firefox ( , , , -1/2 0). , FF , , AFAICT, ( "" ) (-205, -55) .

?

+5
3

viewbox x1, y1, x2, y2 - minx, miny, width height.

+9

, , :

, , .

, , , , min-x + width svg node. min-x min-y - viewBox - 0, 0 min-x, min-y viewBox(and by extension to your 's d attribute), not to sizing of the viewBox`.

, x y svg node , - .

So, so that your second path looks like your first, you can drop the attributes xand yand change the numbers widthand heightinside viewBoxaccording to the first:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 width="210" height="60" viewBox="-205 -55 210 60">

  <g style="stroke: black; fill: none;">
    <path d="M -200 -50 Q -100 0 0 0"/>
  </g>

</svg>
0
source

More articles:


All Articles