保持SVG在放大背景圆时居中。

huangapple
go评论68阅读模式
英文:

keep svg centered when scaling up the background circle

问题

我想使用[此示例SVG图标][1]作为圆形背景。我从[此链接][2]的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"></path>
</svg>

我想要在内部圆圈中添加一些空白/间距。我可以将图标缩小一点或将圆扩大。我增加了viewbox大小和圆的值。

<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.60 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"></path>
</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 

<details>
<summary>英文:</summary>

I want to use [this sample svg icon][1] with a circle background. I took some HTML code on how to do it from the DOM from [this link][2]

So currently I have this result and as you can see the icon is as big as the background circle.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;svg class=&quot;h-6 w-6 flex-shrink-0&quot; viewBox=&quot;0 0 24 24&quot;&gt;
      &lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;12&quot; class=&quot;text-green-200 fill-current&quot;&gt;&lt;/circle&gt;
      &lt;path class=&quot;text-green-600 fill-current&quot; d=&quot;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&quot; /&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;

I would like to have some inner circle margin / spacing. I could either scale down the icon a little bit or scale up the circle. I increased the viewbox size and circle values

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;svg class=&quot;h-6 w-6 flex-shrink-0&quot; viewBox=&quot;0 0 28 28&quot;&gt;
      &lt;circle cx=&quot;14&quot; cy=&quot;14&quot; r=&quot;14&quot; class=&quot;text-green-200 fill-current&quot;&gt;&lt;/circle&gt;
      &lt;path class=&quot;text-green-600 fill-current&quot; d=&quot;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&quot; /&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;

But how can I keep the icon centered? Do I have to use a flexbox and center it by myself? The checkmarks on the Tailwind website (link posted above) don&#39;t need a flexbox so maybe someone knows how to setup a little margin for the icon and still having it in the center?

----------

A workaround for this would be

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;div class=&quot;h-6 w-6 p-1 rounded-full bg-green-200&quot;&gt;
      &lt;svg class=&quot;text-green-600 fill-current&quot; viewBox=&quot;0 0 24 24&quot;&gt;
        &lt;path d=&quot;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&quot; /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

but I would really like to keep the circle and don&#39;t use a div because I think using the circle is a &quot;cleaner&quot; solution?

  [1]: https://raw.githubusercontent.com/sschoger/heroicons-ui/master/svg/icon-rocket.svg
  [2]: https://tailwindcss.com/screencasts/

</details>


# 答案1
**得分**: 2

只需更改 viewBox。可能是这样的。如果您想要更大的边框，请将 viewBox 增大，但不要忘记调整其原点位置。

您可以使圆更大，但如果这样做，请保持圆的 cx 和 cy 不变。

<details>
<summary>英文:</summary>

Just change the viewBox. Something like this perhaps. If you want a larger border make the viewBox bigger still but don&#39;t forget to adjust its origin too.

You can make the circle larger, but if you do leave the cx and cy of the circle alone.

&lt;!-- begin snippet: js hide: false console: true babel: null --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;svg class=&quot;h-6 w-6 flex-shrink-0&quot; viewBox=&quot;-2 -2 28 28&quot;&gt;
      &lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;12&quot; class=&quot;text-green-200 fill-current&quot;&gt;&lt;/circle&gt;
      &lt;path class=&quot;text-green-600 fill-current&quot; d=&quot;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&quot; /&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;



</details>

huangapple
  • 本文由 发表于 2020年1月3日 18:42:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/59577128.html
  • html
  • svg
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定