无法使用 Tailwindcss 获得内联 SVG 来更改颜色答案

【问题标题】：Can't get inline SVG to change colour using Tailwindcss无法使用 Tailwindcss 获得内联 SVG 来更改颜色
【发布时间】：2022-01-25 10:51:09
【问题描述】：

我有一个我想用 Tailwindcss 类控制的 SVG。它以这种格式内联工作并显示为白色，但尺寸明显很大。

  <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              stroke="currentColor"
              width="1569.97"
              height="1564.969"
            >
              <path
                d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
                transform="translate(0 -.031)"
                style={{ fill: "#fff", fillRule: "evenodd" }}
              />
            </svg>

这是我想将其更改为使用 Tailwindcss，但 SVG 消失了。我正在尝试使用 Tailwindcss 类来控制颜色、高度和宽度。

  <svg
              className="h-8 w-8 fill-current stroke-current text-white"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
className="fill-white"
                d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
                transform="translate(0 -.031)"]
              />
            </svg>

请有人把我从这场噩梦中拯救出来。

【问题讨论】：

标签： html css svg tailwind-css

【解决方案1】：

如果你要移除内联width和height属性，添加viewbox来表示纵横比（如果你不使用类或内联样式添加height和width，viewbox值将是width和height ）。然后您的顺风课程将按预期工作。

<script src="https://cdn.tailwindcss.com"></script>

<svg class="h-8 w-8 fill-red-800" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1569.97 1564.969">
  <path d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z"
    transform="translate(0 -.031)"
  />
</svg>

【讨论】：

感谢@dogukan，你是 100% 正确的。我遵循了这个教程v1.tailwindcss.com/course/working-with-svg-icons，然后使用了其中推荐的工具-jakearchibald.github.io/svgomg，并且由于某种原因它删除了我的视图框。丢失的视图框导致了所有问题。再次感谢。

【解决方案2】：

你写的是className而不是class。

width 和 height 或 viewbox 也是 SVG 属性，不能被 CSS h-8 w-8 替换。

有一个例子：

<svg class="fill-current stroke-current" width="1569.97" height="1564.969" xmlns="http://www.w3.org/2000/svg">
  <path class="fill-white" d="M1415.89 440.561c-41.65-41.533-113.73-96.908-167.86-119.78-22.93-53.975-78.48-125.831-120.15-167.355C1039.02 64.832 901.715.027 784.99.027a455.084 455.084 0 0 0-322.3 132.9L133.519 461.086A450.748 450.748 0 0 0-.006 782.4c0 121.38 67.99 256.011 154.079 341.851 41.671 41.54 110.855 94.73 164.963 117.55l3.622 1.53 1.531 3.6c22.932 53.99 76.257 122.92 117.917 164.46 86.088 85.84 221.142 153.61 342.9 153.61A453.525 453.525 0 0 0 1107.3 1431.91l329.17-328.18a450.722 450.722 0 0 0 133.51-321.33c0-121.38-67.98-256-154.08-341.838h-.01Zm-66.28 576.569-329.18 328.17A332.406 332.406 0 0 1 785 1442.38c-85.273 0-201.282-63.16-266.2-127.9-3.421-3.4 3.239 3.53 0 0l-34.913-36.43 21.537-.4a454.158 454.158 0 0 0 313.846-132.89L977 987.509l-86.869-86.6-157.72 157.241c-126.155 125.45-328.958 129.82-460.431 9.92-3.536-3.23-7.042-6.49-10.462-9.9l-41.174-41.05c-129.81-129.725-129.81-339.722 0-469.442L549.51 219.514c130.116-129.422 340.758-129.422 470.87 0l41.18 41.05c3.41 3.4 6.69 6.895 9.93 10.42l14.56 15.788-21.52.4a454.168 454.168 0 0 0-313.856 132.895l-157.732 157.25 86.869 86.6 157.721-157.235c126.159-125.46 328.978-129.827 460.448-9.916 3.53 3.221 7.04 6.5 10.46 9.916l41.17 41.049c129.44 129.66 129.18 339.484-.01 469.4h.01Z" transform="translate(0 -.031)"/>
</svg>

【讨论】：