[英]Change height and width of static SVG string in React.js
I have a static svg string "testImg" that I am working with in my React application我在我的 React 应用程序中使用了一个 static svg 字符串“testImg”
the testImg
string looks like 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"
I am currently rendering this string using dangerouslySetInnerHTML
, which I feel isn't ideal.我目前正在使用
dangerouslySetInnerHTML
渲染这个字符串,我觉得这并不理想。
<div dangerouslySetInnerHTML={{ __html: testImg }}></div>
My main issue though is, I want to change the size of the image being rendered.不过,我的主要问题是,我想更改正在渲染的图像的大小。 I have currently tried different variations of things like
我目前已经尝试过不同的变化,比如
document.querySelector("svg").setAttribute("width", "20px")
Is there a way for me to resize this svg string being rendered?有没有办法让我调整这个正在呈现的 svg 字符串的大小?
Any help would be great.任何帮助都会很棒。
Does this help at all?这有帮助吗?
import testImg from "./testImg.svg";
<img src={testImg} style={{ height: 40, width: 20 }} alt="Test Image"/>
You could try making the svg a component and pass the height and width as props and import it to replace the div.您可以尝试使 svg 成为组件并将高度和宽度作为道具传递并导入以替换 div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.