加載靜態SVG文件反應並添加動態式樣

Question

我試圖加載包含地圖上國區域的SVG，然後動態着色在渲染功能基於其他數據的路徑。

有沒有一種方法可以在構建或運行時加載靜態SVG文件並在基於傳入屬性進行渲染時動態修改樣式？

Answer 1

可以使用https://www.npmjs.com/package/react-samy-svg之間的文本，所以你可以做任何文字處理（顏色替換）。這是如何加載svg文件並更改屬性。 （不需要的SVG代碼粘貼到JSX）

<Samy path="https://raw.githubusercontent.com/hugozap/react-samy-svg/master/examples/1.svg"> 
    <Proxy select="#Star" fill="red"/> 
</Samy> 

的代理元件將（使用CSS選擇）選擇的SVG元素及其所有道具轉發到作爲屬性所選擇的元件。

Answer 2

我認爲這將是相當艱難的，如果可能的話。

有一些方法聲稱可以解決將字符串轉換爲反應組件的類似問題（react-jsx-parser,html-to-react），或者也可以嘗試轉換html-> JSX-> JS（最後一步使用babel）並隨後需要生成的js獲取生成的組件。

考慮到上述步驟的複雜性，只需將SVG呈現爲某個div的html內容（使用dangerouslySetInnerHTML）並稍後使用JS/jquery直接修改其樣式可能會更簡單。

Answer 3

沒有什麼難的。

1. 加載SVG文件 - 只需使用$.ajax呼籲資源，與dataType: 'text'

2. 使用dangerouslySetInnerHTML把它的任何地方。顏色

3. 變遷真的取決於你SVG的結構方式。理想情況下，你應該能夠改變只是使用CSS的顏色（例如交換類或動態生成的風格）。如果一切都失敗了，SVG只是步驟1和2