我有一個 SVG，我想用 Tailwindcss 類來控制它。它以這種格式行內作業并顯示為白色，但顯然尺寸很大。
<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>
有人請救我脫離這個噩夢。
uj5u.com熱心網友回復：
如果你要去掉inlinewidth和heightattributes，加viewbox來代表縱橫比（如果你沒有用class或inline樣式加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>uj5u.com熱心網友回復：
你寫的className而不是class.
此外width和height或是viewbox不能被 CSS 替換的 SVG 屬性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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395827.html
上一篇：顫振：格式例外SVG