Question

我正在开发一个PHP脚本，根据访问者的屏幕分辨率从SVG文件生成jpg壁纸。壁纸由圆形渐变（矩形）背景和顶部的路径组成。你会如何将路径水平和垂直居中到矩形？请记住，矩形的大小和比例不是常数。我应该将背景和路径分离到不同的svg文件，还是有一种简单的方法来居中路径？也许是一个框架？

Answer 1

使用嵌套的<svg>元素和preserveAspectRatio属性可以轻松实现这一目标。将您的背景放在外部svg中，将您的路径放在内部svg中。

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

运行此代码段并尝试调整窗口大小。

要使其正常工作，您需要确保的是内部<svg>元素上的viewBox属性已正确设置。

Answer 2

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

这应该会导致您的坐标位于广场的中心，我想（这是相当早的，我刚刚开始我的第一杯咖啡，所以我可能错了）。这当然是假设您知道所有变量（广场的宽度/高度，应用的任何偏移量和路径的坐标）。

Answer 3

边界框svgElement.getBBox（）可能会有所帮助。

以编程方式居中svg路径

3 个答案: