放大背景圆时保持 svg 居中答案

【问题标题】：keep svg centered when scaling up the background circle放大背景圆时保持 svg 居中
【发布时间】：2020-04-21 22:22:41
【问题描述】：

我想使用带有圆形背景的this sample svg icon。我从 this link 的 DOM 中获取了一些关于如何执行此操作的 HTML 代码

所以目前我有这个结果，你可以看到图标和背景圆圈一样大。

<link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />

<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
  <path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>

我想要一些内圈边距/间距。我可以将图标缩小一点，也可以放大圆圈。我增加了视图框大小和圆值

<link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />

<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 28 28">
  <circle cx="14" cy="14" r="14" class="text-green-200 fill-current"></circle>
  <path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>

但是我怎样才能让图标居中呢？我必须自己使用 flexbox 并将其居中吗？ Tailwind 网站上的复选标记（上面发布的链接）不需要 flexbox，所以也许有人知道如何为图标设置一点边距并仍然将它放在中心？

解决方法是

<link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />

<div class="h-6 w-6 p-1 rounded-full bg-green-200">
  <svg class="text-green-600 fill-current" viewBox="0 0 24 24">
    <path d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
  </svg>
</div>

但我真的很想保留圆圈并且不使用 div，因为我认为使用圆圈是一种“更清洁”的解决方案？

【问题讨论】：

您可能应该使用 CSS 调整 SVG 元素的大小，而不是在内部玩弄它。如果您的 SVG 变得更加复杂，那将是一场噩梦。
@Robert 对不起，你是什么意思？像这样？ jsfiddle.net/f0h7mrn2 这只会移动整个图像：/

标签： html svg tailwind-css

【解决方案1】：

只需更改视图框。可能是这样的。如果您想要更大的边框，请让 viewBox 更大，但不要忘记调整它的原点。

您可以将圆圈变大，但如果您确实不理会圆圈的 cx 和 cy。

<link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />

<svg class="h-6 w-6 flex-shrink-0" viewBox="-2 -2 28 28">
  <circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
  <path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>

【讨论】：

谢谢。所以我拿了你的代码并设置了半径r="16"，但随后一些边界被切断了。增加h-6 或宽度没有帮助。我将如何解决这个问题？ jsfiddle.net/vdtur18c/1
增加 viewBox 的大小，但不要忘记调整它的原点。
对不起，你说的原产地到底是什么意思？我目前调整了尺寸jsfiddle.net/902e1gk7，现在顶部和左侧的边框被切断了。你的意思是使用 CSS 转换？
我认为 @Robert 的意思是 w3schools.com/cssref/css3_pr_transform.asp 但我不确定
viewBox 有 4 个参数，如果你增加高度和宽度值，你也必须调整前两个 x、y（或原点）参数。随着宽度变大，您需要使 x 变小（对于 y 和高度类似）。