如何使用Tailwind CSS更改SVG的特定部分的颜色？

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

How to change the color of a specific part of an SVG using Tailwind CSS?

问题

如何将ThumbsUp SVG图标中的手腕分隔符颜色更改为黑色，并用白色填充其余部分？如果手腕与其他部分有明显区别，以便给用户一种区分感，那将会很棒。

以下是我想要的最终外观：

下面的代码将所有区域都填充为白色。

import { ThumbsUp } from "lucide-react";

<ThumbsUp
  strokeWidth={1}
  size={20}
  className={`${
    commentReaction?.type === "LIKE"
      ? "stroke-black [&>:nth-child(2)]:fill-base-white"
      : "dark:text-base-white"
  }`}
/>

就我所了解，第一条路径是手腕分隔符，第二条路径表示其余区域。在我看来，似乎使用了:nth-child伪类不正确，或者可能不必要。我不确定，但是否有人可能知道解决方案？

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="1"
  stroke-linecap="round"
  stroke-linejoin="round"
  className="lucide lucide-thumbs-up"
>
  <path d="M7 10v12" />  {/* 手腕分隔符 */}
  <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
</svg>
英文:

How can I change the color of only the wrist separator in the ThumbsUp SVG icon to black and fill the rest of the parts with white? It would be great if at least there is a clear distinction between the wrist and the rest of the parts, giving the user a sense of differentiation.

如何使用Tailwind CSS更改SVG的特定部分的颜色？

The desired final appearance I want is as follows.

如何使用Tailwind CSS更改SVG的特定部分的颜色？

The following code fills all areas with white color.

import { ThumbsUp } from &quot;lucide-react&quot;;

&lt;ThumbsUp
  strokeWidth={1}
  size={20}
  className={`${
    commentReaction?.type === &quot;LIKE&quot;
      ? &quot;stroke-black [&amp;&gt;*:nth-child(2)]:fill-base-white&quot;
      : &quot;dark:text-base-white&quot;
  }`}
/&gt;

From what I understand, the first path is the wrist separator, and the second path represents the rest of the area. In my opinion, it seems like either the :nth-child pseudo-class is being used incorrectly or it may not be necessary. I'm not sure, but is there anyone who might know a solution?

&lt;svg
  xmlns=&quot;http://www.w3.org/2000/svg&quot;
  width=&quot;24&quot;
  height=&quot;24&quot;
  viewBox=&quot;0 0 24 24&quot;
  fill=&quot;none&quot;
  stroke=&quot;currentColor&quot;
  stroke-width=&quot;1&quot;
  stroke-linecap=&quot;round&quot;
  stroke-linejoin=&quot;round&quot;
  className=&quot;lucide lucide-thumbs-up&quot;
  &gt;
  &lt;path d=&quot;M7 10v12&quot; /&gt;  {/* The wrist sepeartor */}
  &lt;path d=&quot;M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z&quot; /&gt;
&lt;/svg&gt;

答案1

得分: 2

我认为第二条路径是围绕“ThumbsUp”的边框，因此如果您使用“fill”，它将用您想要的颜色填充整个区域，但也会覆盖手腕。

另一方面，如果您使用“stroke”，它只会改变边框的颜色，不会用您的颜色填充它。

所以在我看来，更好的选择是使用不同的SVG来实现这个效果：

英文:

I think the second path is a border around the ThumbsUp, so if you use fill it'll fill all the area with the color you want but that covers the wrist too.
On the other hand, if you use stroke, it only changes the color of the border and will not fill it with your color.
So IMO, the better option is to use a different SVG for this approach:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;svg class=&quot;w-24 h-24&quot; fill=&quot;green&quot; viewBox=&quot;0 0 8 8&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;g id=&quot;SVGRepo_bgCarrier&quot; stroke-width=&quot;0&quot;&gt;&lt;/g&gt;&lt;g id=&quot;SVGRepo_tracerCarrier&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;/g&gt;&lt;g id=&quot;SVGRepo_iconCarrier&quot;&gt; &lt;path d=&quot;M4.47 0c-.19.02-.37.15-.47.34-.13.26-1.09 2.19-1.28 2.38-.19.19-.44.28-.72.28v4h3.5c.21 0 .39-.13.47-.31 0 0 1.03-2.91 1.03-3.19 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.39-1.58.47-1.84c.08-.26-.05-.54-.31-.63-.07-.02-.12-.04-.19-.03zm-4.47 3v4h1v-4h-1z&quot;&gt;&lt;/path&gt; &lt;/g&gt;&lt;/svg&gt;

<svg class="w-24 h-24" fill="#000000" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.47 0c-.19.02-.37.15-.47.34-.13.26-1.09 2.19-1.28 2.38-.19.19-.44.28-.72.28v4h3.5c.21 0 .39-.13.47-.31 0 0 1.03-2.91 1.03-3.19 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.39-1.58.47-1.84c.08-.26-.05-.54-.31-.63-.07-.02-.12-.04-.19-.03zm-4.47 3v4h1v-4h-1z"></path> </g></svg>

<svg fill='blue' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 106.16" style="enable-background:new 0 0 122.88 106.16" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M4.02,44.6h27.36c2.21,0,4.02,1.81,4.02,4.03v53.51c0,2.21-1.81,4.03-4.02,4.03H4.02 c-2.21,0-4.02-1.81-4.02-4.03V48.63C0,46.41,1.81,44.6,4.02,44.6L4.02,44.6z M63.06,4.46c2.12-10.75,19.72-0.85,20.88,16.48 c0.35,5.3-0.2,11.47-1.5,18.36l25.15,0c10.46,0.41,19.59,7.9,13.14,20.2c1.47,5.36,1.69,11.65-2.3,14.13 c0.5,8.46-1.84,13.7-6.22,17.84c-0.29,4.23-1.19,7.99-3.23,10.88c-3.38,4.77-6.12,3.63-11.44,3.63H55.07 c-6.73,0-10.4-1.85-14.8-7.37V51.31c12.66-3.42,19.39-20.74,22.79-32.11V4.46L63.06,4.46z"/></g></svg>

<svg fill='green' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 106.16" style="enable-background:new 0 0 122.88 106.16" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M4.03,61.56h27.36c2.21,0,4.02-1.81,4.02-4.02V4.03C35.41,1.81,33.6,0,31.39,0H4.03C1.81,0,0,1.81,0,4.03 v53.51C0,59.75,1.81,61.56,4.03,61.56L4.03,61.56z M63.06,101.7c2.12,10.75,19.72,0.85,20.88-16.48c0.35-5.3-0.2-11.47-1.5-18.36 l25.15,0c10.46-0.41,19.59-7.9,13.14-20.2c1.47-5.36,1.69-11.65-2.3-14.13c0.5-8.46-1.84-13.7-6.22-17.84 c-0.29-4.23-1.19-7.99-3.23-10.88c-3.38-4.77-6.12-3.63-11.44-3.63H55.07c-6.73,0-10.4,1.85-14.8,7.37v47.31 c12.66,3.42,19.39,20.74,22.79,32.11V101.7L63.06,101.7L63.06,101.7z"/></g></svg>
<!-- end snippet -->

答案2

得分: 0

尝试这个：

&lt;ThumbsUp className=&quot;[&amp;&gt;*:first-child]:stroke-black&quot; /&gt;
英文:

Try this

&lt;ThumbsUp className=&quot;[&amp;&gt;*:first-child]:stroke-black&quot; /&gt;

huangapple
  • 本文由 发表于 2023年7月17日 13:09:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/76701625.html
  • css
  • svg
  • tailwind-css
匿名

发表评论

匿名网友

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

确定