以编程方式居中 svg 路径

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 属性设置正确。