以编程方式居中 svg 路径答案

【问题标题】：Programmatically centering svg path以编程方式居中 svg 路径
【发布时间】：2013-05-29 06:45:21
【问题描述】：

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

【问题讨论】：

欢迎来到 S.O.该社区旨在帮助您解决特定问题和您尝试过的代码。您尝试过什么来解决您的问题？

标签： svg path alignment centering

【解决方案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>

运行这个 sn-p 并尝试调整窗口大小。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：