0

I'm working on a PHP script that generates a jpg wallpaper from an SVG-file according to the screen resolution of the visitor. The wallpaper consists of a circular gradient (rectangle) background and a path on top of it. How would you go about centering the path horizontally and vertically to the rectangle? Remember that the rectangle's size and proportions are not a constant. Should I separate the background and path to different svg files or is there an easy way to center paths? Maybe a framework?

4

2 回答 2

5

This is easilly achieved by using nested <svg> elements and the preserveAspectRatio attribute. Put your background in the outer svg and your path in the inner one.

      <?xml version="1.0" encoding="UTF-8"?>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    
        <rect id="background" width="100%" height="100%" fill="grey"/>

        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%">
          <g>
            <circle cx="15" cy="20" r="10" fill="yellow"/>
            <circle cx="12" cy="17" r="1.5" fill="black"/>
            <circle cx="18" cy="17" r="1.5" fill="black"/>
            <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/>
          </g>
        </svg>
    
      </svg>

Run this snippet and try resizing the window.

To get this to work, all you need to ensure is that the viewBox attribute on the inner <svg> element is correctly set.

于 2013-06-04T15:33:43.310 回答
0

如果您知道路径的坐标，则可以将 x/y 坐标的总和除以坐标数，这将为您提供坐标集的平均位置。然后，将每个坐标偏移为正方形宽度/高度的一半的坐标，加上任何偏移量，减去坐标集中心与正方形宽度/高度的一半之间的差值。

我认为，这应该会导致您的坐标以正方形为中心（这里还早，我刚开始喝第一杯咖啡，所以我可能是错的）。这当然是假设您知道所有变量（正方形的宽度/高度、应用的任何偏移量和路径的坐标）。

于 2013-06-03T06:49:15.670 回答