我一直在努力渲染一個 .svg 檔案的徽標。我正在像這樣匯入它
import logo from '../../stylesheets/logo.svg';
當我用img標簽渲染它時，這就是我得到的：
<img src={logo} style={{width:'175px', height:'40px'}} />
當我用objectorsvg標記渲染它時，這就是我得到的
<svg src={logo} style={{width:'175px', height:'40px'}} />
我不確定出了什么問題，但我嘗試了一些我在網上看到的解決方案，比如將這一行添加到我的 svg 檔案中，但它不起作用。
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
這是我的 svg 檔案
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 250" style="enable-background:new 0 0 800 250;" xml:space="preserve">
<style type="text/css">
.st0{fill:#07A4AB;}
</style>
<g>
<g>
<path class="st0" d="M271.9,78.4c-0.9-0.9-2.5-2.1-4.9-3.6c-2.4-1.5-5.2-3-8.6-4.4c-3.4-1.4-7-2.7-10.9-3.6c-3.9-1-7.9-1.5-12-1.5
c-7.2,0-12.6,1.4-16.1,4.1c-3.5,2.7-5.3,6.4-5.3,11.2c0,2.8,0.7,5.1,2,6.9c1.3,1.8,3.3,3.4,5.8,4.8c2.5,1.4,5.7,2.6,9.6,3.7
c3.9,1.1,8.3,2.3,13.4,3.5c6.6,1.7,12.6,3.6,18,5.6c5.4,2,10,4.5,13.7,7.5c3.8,3,6.7,6.6,8.7,10.9c2,4.2,3.1,9.5,3.1,15.7
c0,7.2-1.3,13.4-4,18.6c-2.7,5.1-6.3,9.3-11,12.5c-4.6,3.2-9.9,5.5-15.9,7c-6,1.5-12.3,2.3-18.9,2.3c-10.1,0.1-20.2-1.4-30.1-4.4
c-9.9-3-18.8-7.2-26.7-12.8l11.5-22.7c1.1,1.1,3.2,2.6,6.2,4.4c3,1.8,6.5,3.6,10.6,5.5c4.1,1.8,8.6,3.3,13.5,4.6
c4.9,1.2,10,1.8,15.2,1.8c14.4-0.1,21.6-4.7,21.6-14c0-2.9-0.9-5.4-2.5-7.4c-1.7-2-4-3.8-7.1-5.3c-3.1-1.5-6.7-2.9-11-4.1
c-4.3-1.2-9.1-2.6-14.5-4.1c-6.5-1.7-12.1-3.6-16.9-5.7c-4.8-2.1-8.7-4.5-11.9-7.3c-3.2-2.8-5.6-6.1-7.2-9.8
c-1.6-3.7-2.4-8.2-2.5-13.4c0-6.8,1.2-12.9,3.7-18.3c2.5-5.3,6-9.8,10.5-13.4c4.5-3.6,9.7-6.3,15.6-8.2c5.9-1.9,12.3-2.8,19.2-2.9
c9.5-0.1,18.3,1.4,26.3,4.3c8,2.9,15,6.4,21,10.4L271.9,78.4z"/>
.9-5.5,9.5C718.2,117.6,717.6,121.5,717.6,125.9z"/>
</g>
<g>
<g>
....
</g>
<g>
....
</g>
<g>
....
</g>
<g>
....
</g>
</g>
</g>
</svg>
我錯過了什么嗎？有人可以將我推向正確的方向嗎？謝謝你。
uj5u.com熱心網友回復：
import svg from './svg.svg';
<img src={svg} />
這是匯入 svg 的方法，如果您需要進一步的幫助，請隨時回復。
uj5u.com熱心網友回復：
你必須把import它當作一個component. 它不是影像，因此您不能將其放入img標簽中。
SVG's 呈現為 a component，因此您可以直接將其用作component.
import { ReactComponent as Logo } from '../../stylesheets/logo.svg';
現在將其用作component
<Logo />
uj5u.com熱心網友回復：
我最終將 xml 轉換為 react 組件，因為上述方法都不適合我。
const Logo = () => {
return(
<div className="image-container">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 800 250" width="22vh">
<g>
<g>
.........
</g>
<g>
<g>
..........
</g>
</g>
</g>
</svg>
</div>
)
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/451853.html
上一篇：在滑鼠懸停時調整現有矩形的大小
下一篇：SVG比例（原點居中）