在 React.js 中更改 static SVG 字符串的高度和寬度

Question

我在我的 React 應用程序中使用了一個 static svg 字符串“testImg”

testImg字符串看起來像

"<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 20010904//EN\"\n \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">\n<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\"\n width=\"225.000000pt\" height=\"225.000000pt\" viewBox=\"0 0 225.000000 225.000000\"\n preserveAspectRatio=\"xMidYMid meet\">\n<metadata>\nCreated by potrace 1.16, written by Peter Selinger 2001-2019\n</metadata>\n<g transform=\"translate(0.000000,225.000000) scale(0.100000,-0.100000)\"\nfill=\"#000000\" stroke=\"none\">\n</g>\n</svg>\n"

我目前正在使用dangerouslySetInnerHTML渲染這個字符串，我覺得這並不理想。

 <div dangerouslySetInnerHTML={{ __html: testImg }}></div>

不過，我的主要問題是，我想更改正在渲染的圖像的大小。 我目前已經嘗試過不同的變化，比如

 document.querySelector("svg").setAttribute("width", "20px")

有沒有辦法讓我調整這個正在呈現的 svg 字符串的大小？

任何幫助都會很棒。

Answer 1

這有幫助嗎？

import testImg from "./testImg.svg";
<img src={testImg} style={{ height: 40, width: 20 }} alt="Test Image"/>

Answer 2

您可以嘗試使 svg 成為組件並將高度和寬度作為道具傳遞並導入以替換 div。