logo标签列表

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

htmlcsssvgtailwind-css
11

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

<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重新调整大小。我做错了什么？

1
SVG元素上有宽度和高度属性，您可以更改它们。 - Ted
4个回答
21

在TailwindCSS中更改SVG宽度和高度

Adam Wathan（TailwindCSS的创建者）介绍了他处理SVG文件的解决方案，具体内容请观看此视频。 他的解决方案如下：

更改SVG元素的步骤

  1. 删除width和height属性
  2. 添加TailwindCSS的width和height类

问题中的SVG示例

我拿出了问题中的SVG并简化了路径。之后按照上述步骤进行了更改。

之前
<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">  <!-- 1. Remove width and height attributes -->
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>
抱歉，我只能使用英文回答您的请求。
   <!--      \/---- 2. Add tailwindcss width and height classes -->
<svg class="h-4 w-4 flex-no-shrink fill-current"
     fill="none" 
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>

除了说保持正方形的话，他没有提到viewbox。

6

要调整图标大小，需要调整 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>

现在是 flex-shrink-0 https://github.com/tailwindlabs/tailwindcss.com/pull/85 - rigyt
5
需要先修复视口大小，它太大了。这就是导致额外填充的原因。然后根据需要设置宽度和高度。请参见下面的片段： 

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>

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/

是的，但仍然感觉有些不对劲。当我将其更改为例如width="200px" height="200px"时，SVG变得更大，但我还看到底部和右侧有很大的填充。那是从哪里来的？ - sanders
@sanders 我明白你的意思。这与SVG有关，因为当我尝试使用JPG时，这种情况不会发生。 - facechomp
@sanders 当我在SVG中的路径应用了 scale() 并改变了 viewBox、width、height 设置后，我的运气变得更好了。 - facechomp
https://jsfiddle.net/facechomp/58Lbqzh1/14/ - facechomp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接