TailwindCSS：SVG 图标无法正确调整大小

Question

我一直在尝试调整此示例中的图标大小。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100" width="100px" height="100px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>

但是，无论我尝试什么，我都无法调整 svg 的大小。我做错了什么？

Answer 1

通过更改 width 和 height 对我有用：

<svg class="flex-no-shrink fill-current" fill="none" xmlns=
"http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50px" height="50px">

https://jsfiddle.net/facechomp/58Lbqzh1/

Answer 2

要调整图标大小，请调整 viewBox

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>

<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">

    <svg 
      class="flex-no-shrink fill-current" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 80 80"  
      width="100px" 
      height="100px"
    >
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>

    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>

Answer 3

您需要先修复视图框——它太大了。这就是给你额外填充的原因。然后根据需要设置宽度和高度。请参阅下面的代码段：

function changeHandler(event){
  var svg = document.getElementById('svg');
  svg.setAttribute("width", event.target.value + 'px');
  svg.setAttribute("height", event.target.value + 'px');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet" />
<input type="number" value="20" onchange="changeHandler(event)" />
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg id="svg" class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>

</div>

Answer 4

在 TailwindCSS 中更改 SVG 宽度和高度

Adam Wathan (TailwindCSS creator) solution for working with SVGs is presented in a video here.他的解决方法如下：

更改 SVG 元素的步骤

删除宽度和高度属性
添加 TailwindCSS 宽度和高度类

TailwindCSS：SVG 图标无法正确调整大小

TailwindCSS: SVG icon won't resize properly

html

css

svg

tailwind-css

在 TailwindCSS 中更改 SVG 宽度和高度

更改 SVG 元素的步骤

相关 SVG 示例