如何在一个居中的背景上使用多个 SVG

Posted 2023-02-22

【中文标题】如何在一个居中的背景上使用多个 SVG

【英文标题】：How to use multiple SVGs on a single background centered

【发布时间】：2021-09-21 13:38:52

【问题描述】：

我有 3 个 svg 圆圈我想用作背景。我有一个背景颜色，希望 3 个圆圈相互放置并在页面上居中。示例：外面的大圆圈，里面的中圈，然后中号里面的小圆圈。我添加了一张图片来展示我想要实现的目标。

使用单个 svg，我可以使用 justify-content: center; 将其居中。我还尝试用 div 元素包装所有 3 个 svg 组件，但也没有成功。

项目设置：Vue 3、TypeScript、Tailwind css、Css3。

有人可以帮忙吗？

<template>
  <div class="wrapper bg-gradient-to-b from-green-700 to-blue-500">
    <!--<slot/>-->
    <svg
      
      
      viewBox="0 0 414 563"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="195.44"
        cy="281.56"
        r="255.416"
        stroke="black"
        stroke-opacity="0.02"
        stroke-
      />
    </svg>

    <svg
      
      
      viewBox="0 0 414 437"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="195.44"
        cy="218.56"
        r="194.578"
        stroke="black"
        stroke-opacity="0.04"
        stroke-
      />
    </svg>

    <svg
      
      
      viewBox="0 0 307 307"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      justify-center
    >
      <circle
        cx="153.44"
        cy="153.559"
        r="137.587"
        stroke="black"
        stroke-opacity="0.05"
        stroke-
      />
    </svg>
  </div>
</template>

【问题讨论】：

将所有<circle> 元素放到同一个svg 中不是更简单吗？

@Terry 如果我将所有圆圈放在一个 svg 中，那么我将如何指定每个圆圈的高度？

@Terry 我应该调整 cx 和 cy 值吗？

圆的大小由它的半径决定，即r

@Terry 这对我有用，谢谢您的意见。

【参考方案1】：

@Terry 正如 Terry 建议的那样，我将所有 3 个圆形元素放在一个 svg 中。然后我使用 cx 和 cy 属性来相应地定位圆圈。