如何設定從CDN匯入的SVG的填充？-有解無憂

我正在使用 Next JS 開發一個網站，我想顯示一些我使用 Sanity 存盤的 SVG 圖示。如果我希望能夠動態更改其填充顏色（例如，當圖示懸停時更改顏色），如何顯示從 Sanity CDN 獲得的 SVG？或者這是不可能的？

這是我的代碼的摘要，只是為了向您展示我正在嘗試做的事情：

const [icon, setIcon] = useState('');

useEffect(() => {
    const query = '*[_type == "socials"]'

    client.fetch(query)
      .then((data) => {
        setIcon(urlFor(data.icon).width(24).url());
    });
}, []);

<NextImage
    useSkeleton
    src={icon}
    width='24'
    height='24'
    alt='name'
/>

注意：上面的 NextImage 組件基本上是一個添加了骨架加載效果的 next/image 組件。

使用上面的代碼，我能夠成功顯示 SVG，所以沒有問題。但是，我似乎無法添加懸停效果來動態更改顯示的 SVG 的顏色。這就是我希望得到的答案。

這是顯示的 SVG 圖示：

如何設定從 CDN 匯入的 SVG 的填充？

我希望能夠以編程方式更改這些圖示的顏色，而不必更改我已經上傳到 Sanity 的 SVG。

uj5u.com熱心網友回復：

如果 SVG 被行內到 HTML 中，您只能設定樣式，而不是通過<img>標簽或外部 URL。

但是，可以從影像 URL 中獲取 SVG 標記并將其行內到 HTML 中。您需要獲取原始 SVG URL（因此您無法使用該.width()函式調整其大小）。

獲得 SVG URL（以 .svg 結尾，轉到 URL 會顯示 SVG 標記）后，您可以使用fetch()或您喜歡的方法獲取資料，然后使用dangerouslySetInnerHTML將回傳的 SVG 標記嵌入到<div>. （確保您相信影像的來源，否則您需要對其進行清理。）

設定 SVG 的樣式將取決于您在應用程式中管理樣式的方式以及特定的 SVG，但您可以執行以下操作：

/* target svgs inside a div with class "inline-svg" */
div.inline-svg svg {
  color: black;
  width: 24px;
  height: 24px;
}
div.inline-svg:hover svg {
  color: red;
}

這僅在您的 SVG 具有fill="currentColor"或stroke="currentColor"取決于其結構時才有效。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492516.html

標籤：打字稿 svg 下一个.js 理智 nextjs-图像

上一篇：在其他任何事情之前加載影像（渲染阻止）

下一篇：svelte中的動態SVG注入