SVG在safari中不呈现,但在chrome中工作



我正在尝试加载svg代码作为组件,但它在safari浏览器中不起作用,但在chrome中工作。这是我正在尝试的代码

const VOLVO_XC90_Old_DARK = ({defaultColor}) => {
return (
<svg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
x='0px'
y='0px'
viewBox='0 0 566.93 566.93'
style={{enableBackground: "new 0 0 566.93 566.93"}}
xmlSpace='preserve'
>
<style
type='text/css'
dangerouslySetInnerHTML={{
__html: "nt.st0{display:none;}nt.st1{display:inline;}nt.st2{display:inline;fill:#858787;}nt.st3{display:inline;fill:#CBCBCB;}nt.st4{display:inline;fill:#221E1F;}nt.st5{display:inline;fill:#E7E7E7;}nt.st6{fill:#221E1F;}nt.st7{fill:#858787;}nt.st8{fill:#868888;}nt.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#86A4B0;}nt.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#B82F29;}nt.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#B99D5D;}nt.st12{fill:#CBCBCB;}nt.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#404160;}nt.st14{fill:#110F0F;}nt.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#CC262E;}nt.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#110F0F;}nt.st17{fill-rule:evenodd;clip-rule:evenodd;fill:#770F0E;}nt.st18{fill-rule:evenodd;clip-rule:evenodd;fill:#9EA7AF;}nt.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#303F47;}nt.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#CBCBCB;}nt.st21{fill-rule:evenodd;clip-rule:evenodd;fill:#333E5A;}nt.st22{fill-rule:evenodd;clip-rule:evenodd;fill:#767880;}nt.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#959698;}nt.st24{fill:#CCCCCC;}nt.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#9B8F69;}nt.st26{fill-rule:evenodd;clip-rule:evenodd;fill:#27311E;}nt.st27{fill-rule:evenodd;clip-rule:evenodd;fill:#979C9F;}nt.st28{fill-rule:evenodd;clip-rule:evenodd;fill:#866544;}nt.st29{fill-rule:evenodd;clip-rule:evenodd;fill:#2D1D11;}nt.st30{fill-rule:evenodd;clip-rule:evenodd;fill:#6E1035;}nt.st31{fill-rule:evenodd;clip-rule:evenodd;fill:#5B493D;}nt.st32{fill:#423B3D;}nt.st33{fill:#E7E7E7;}nt.st34{fill:#E8E8E8;}nt.st35{fill-rule:evenodd;clip-rule:evenodd;fill:#342D23;}nt.st36{fill:#3B3234;}nt.st37{fill:none;stroke:#1D2087;stroke-width:0.0201;stroke-miterlimit:22.9256;}n",
}}
/>
<g id='Layer_1'></g>
<g id='Tire'>
<g>
<path
className='st6'
d='M335.846,314.593c0,14.46-8.746,26.178-19.542,26.178h-8.074c-9.349,0-17.16-8.786-19.085-20.529
c-0.298-1.815-0.457-3.711-0.457-5.649c0-14.46,8.746-26.178,19.542-26.178h8.074c0.886,0,1.759,0.082,2.617,0.238
C328.478,290.362,335.846,301.324,335.846,314.593'
/>
<path
className='st6'
d='M202.181,315.556c0,13.609-7.696,24.638-17.196,24.638h-7.105c-8.226,0-15.099-8.269-16.794-19.321
c-0.262-1.708-0.402-3.493-0.402-5.317c0-13.609,7.696-24.638,17.195-24.638h7.105c0.78,0,1.548,0.077,2.303,0.224
C195.698,292.75,202.181,303.067,202.181,315.556'
/>
<path
className='st6'
d='M277.25,312.861c0,13.609-7.696,24.638-17.195,24.638h-7.105c-8.226,0-15.099-8.269-16.794-19.321
c-0.262-1.708-0.402-3.493-0.402-5.317c0-13.609,7.696-24.638,17.196-24.638h7.105c0.78,0,1.547,0.077,2.303,0.224
C270.767,290.055,277.25,300.372,277.25,312.861'
/>
<path
className='st6'
d='M411.075,314.621c0,13.474-8.15,24.393-18.21,24.393h-7.524c-8.711,0-15.99-8.187-17.784-19.129
c-0.278-1.691-0.426-3.458-0.426-5.264c0-13.474,8.15-24.392,18.21-24.392h7.524c0.826,0,1.639,0.076,2.439,0.222
C404.21,292.042,411.075,302.256,411.075,314.621'
/>
</g>
</g>
<g id='Wheels'>
<g>
<path
className='st8'
d='M322.439,314.595c0,10.516-6.363,19.042-14.212,19.042c-7.849,0-14.212-8.526-14.212-19.042
c0-10.517,6.363-19.042,14.212-19.042C316.076,295.553,322.439,304.078,322.439,314.595'
/>
<path
className='st8'
d='M190.384,315.557c0,9.898-5.599,17.922-12.505,17.922s-12.506-8.024-12.506-17.922
c0-9.898,5.599-17.922,12.506-17.922S190.384,305.659,190.384,315.557'
/>
</g>
</g>
<g id='Main'>
<path
style={{fill: defaultColor}}
className='st12'
d='M197.763,323.173c30.118-0.789,60.237-1.579,90.355-2.368c-3.496-19.501,0.683-35.179,17.473-35.595
c13.584,0.19,22.257,12.179,24.419,29.644c0.856,6.931,2.485,9.579,10.573,9.594c22.467-1.518,44.935-3.036,67.402-4.554
c3.793-0.338,5.576-1.867,7.729-4.096c2.876-3.182,6.206-6.748,6.381-11.196c0.109-2.554,0.218-5.107,0.327-7.661
c0.124-2.31-1.275-2.401-2.955-2.209c0.014-1.136,0.029-2.272,0.043-3.409c0.027-2.706-0.835-2.953-2.053-3.855
c0.263-6.153-0.944-10.698-4.948-12.184c-0.771-1.66-2.479-3.211-5.071-4.656c-11.133-5.062-30.607-8.89-48.457-11.214
c-11.345-8.513-22.757-17.014-40.806-24.41c-8.98-3.474-18.861-6.543-33.758-7.368c-36.446-2.793-72.06-1.769-106.577,4.293
c-3.589,0.712-5.702,1.628-7.586,3.148c-10.019,8.647-16.847,17.766-21.131,27.252c-1.113,2.246-2.833,1.968-2.915,5.101
c-0.475,7.299-0.467,14.277,0.546,20.585c-1.575,0.186-2.524,1.022-2.186,3.279c2.036,19.187,8.292,19.956,13.662,24.592
c0.546-14.662,2.044-29.09,16.031-28.6C190.343,287.851,194.095,306.017,197.763,323.173'
/>
</g>
<g id='Main2'></g>
<g id='Darker'>
<g>
<path
className='st36'
d='M197.763,323.173c30.118-0.789,60.237-1.579,90.355-2.368c-3.496-19.501,0.683-35.179,17.473-35.595
c13.584,0.19,22.257,12.179,24.419,29.644c0.856,6.931,2.485,9.579,10.573,9.594c22.467-1.518,44.935-3.036,67.402-4.554
c3.793-0.338,5.576-1.867,7.729-4.096c2.876-3.182,6.206-6.748,6.381-11.196c0.109-2.554,0.218-5.107,0.327-7.661
c0.124-2.307-1.271-2.4-2.947-2.21l-0.003,0.002c-1.255,0.124-2.511,0.248-3.766,0.372c-1.338,0.204-1.772,1.08-1.93,1.856
c-0.415,1.962-0.831,3.925-1.246,5.887c-11.517,0.678-23.096,0.846-34.737,0.53c-0.259-1.174-0.517-2.348-0.776-3.523
c-0.643-2.449-2.298-3.842-4.137-4.081c-11.424-0.183-22.848-0.367-34.271-0.551c-1.291-0.009-1.738,0.643-1.695,1.695
c0.212,2.154,0.424,4.307,0.636,6.46c0.233,2.973-1.478,4.358-5.295,4.024c-3.967-16.581-12.452-26.905-26.9-27.111
c-16.874,0.676-22.121,13.424-21.816,28.806c-28.876-0.6-57.753-1.2-86.63-1.8c-4.368-14.809-11.254-24.421-22.981-24.04
c-13.259,0.298-15.911,9.647-17.368,20.016c-1.094-0.565-2.189-1.13-3.283-1.694c-1.208-0.636-2.079-1.74-2.33-4.978
c-0.318-2.718-0.635-5.437-0.953-8.155c-1.079-0.143-2.158-0.296-3.238-0.431c-1.574,0.186-2.521,1.023-2.184,3.279
c2.036,19.187,8.292,19.956,13.662,24.592c0.546-14.662,2.044-29.09,16.031-28.6C190.343,287.851,194.095,306.017,197.763,323.173
'
/>
<path
d='M410.776,293.254c0.044-0.647-0.298-0.847-1.058-0.854c-9.497,0.224-18.955,0.214-28.371-0.048
c-0.81-0.003-1.69,0.017-1.53,1.041c0.146,1.378,0.297,2.497,1.669,2.414c9.156,0.105,18.379,0.099,27.777-0.201
c0.329-0.021,0.575-0.042,0.768-0.139c0.192-0.096,0.331-0.268,0.444-0.599l0.151-0.808L410.776,293.254z'
/>
<path
d='M408.887,278.162c-0.095-1.52-1.429-2.287-2.943-2.253c-10.529-0.392-20.849-0.296-31.115-0.077
c-1.131-0.007-1.997,0.468-1.842,1.666c0.365,2.837,0.892,5.458,1.52,7.945c0.371,1.386,1.46,2.429,3.233,2.502
c9.294,0.225,18.43,0.214,27.375-0.083c1.883-0.172,3.131-1.388,3.574-3.054C409.001,282.737,409.012,280.489,408.887,278.162'
/>
<path
d='M373.233,295.836l-0.67-2.665c-0.274-0.837-0.968-1.348-2.138-1.41c-8.254-0.024-16.043-0.222-23.763-0.445
c-1.385,0.02-1.732,0.823-1.658,1.797l0.186,2.217l27.688,0.445C372.997,295.791,373.116,295.811,373.233,295.836'
/>
<path
d='M276.621,294.031l-80.293-2.091c-0.559,0.003-0.884-0.336-1.115-0.57c-0.621-0.643-1.148-1.368-1.579-2.17
c-0.351-0.641,0.083-0.918,0.417-0.923l84.028,1.899c1.206,0.079,1.377,0.742,1.046,1.454c-0.363,0.697-0.708,1.227-1.069,1.699
C277.734,293.705,277.478,294.031,276.621,294.031'
/>
<path
d='M184.452,290.918h-6.572c-9.499,0-17.196,11.028-17.196,24.638c0,1.824,0.14,3.609,0.402,5.317
c0.036,0.235,0.075,0.469,0.116,0.702c-0.884-0.064-1.653-0.428-2.191-1.403c-0.535-1.31-0.646-2.725-0.787-4.292l0.007,0.006
c0.546-14.662,2.044-29.09,16.031-28.6C178.41,287.432,181.735,288.751,184.452,290.918 M316.477,288.417l-0.173-0.001h-8.075
c-10.796,0-19.542,11.717-19.542,26.178c0,1.938,0.159,3.835,0.457,5.649c0.294,1.794,0.727,3.518,1.28,5.154
c-1.149-0.103-2.102-0.518-2.878-1.203c-0.842-0.867-1.661-2.034-2.394-3.311l2.966-0.078
c-3.496-19.501,0.683-35.179,17.473-35.595C309.679,285.267,313.322,286.394,316.477,288.417z'
/>
</g>
</g>
<g id='Windows'>
<g>
<path
className='st6'
d='M358.98,259.414c-11.344-8.513-22.757-17.014-40.805-24.41c-0.328-0.127-0.658-0.254-0.99-0.38
c-17.228-0.604-34.37-0.907-51.33-0.575c10.535,7.496,18.69,16.578,26.719,25.745C314.231,259.428,336.217,259.228,358.98,259.414
L358.98,259.414z'
/>
<path
className='st6'
d='M280.95,258.384c1.543,2.25,1.018,3.864,0.538,5.491c-39.748-1.818-78.718-2.771-116.298-2.181
c-1.625-0.001-2.393-0.764-2.555-2.857c0.015-1.894,0.566-3.84,1.723-5.836c3.467-5.276,7.374-9.848,11.412-14.211
c1.606-1.582,3.026-2.291,5.654-2.749c18.205-2.496,36.67-3.49,55.637-3.482c9.967-0.001,17.846,0.801,24.984,6.328
C268.684,244.55,274.926,251.199,280.95,258.384'
/>
</g>
</g>
<g id='Lights'>
<path
className='st7'
d='M335.642,288.023c11.279,0.389,22.63,0.267,33.711,0.667c-0.787-3.049-1.808-6.128-3.349-9.281
c-1.961-3.826-7.163-2.847-11.935-2.505c-2.588-1.952-8.934-3.016-13.096-2.699c-3.847,0.246-5.026,2.881-5.346,4.366
C335.1,281.154,335.253,285.039,335.642,288.023'
/>
</g>
<g id='Signals'></g>
</svg>
);}; export default VOLVO_XC90_Old_DARK;

我是这样使用它的

<VOLVO_XC90_Old_DARKNew defaultColor={
isSelected === -1
? "#C0C0C0"
: chooseCar[isSelected].color
}/>

找到问题。在safari中,我们必须将svg的高度和宽度定义为wor

相关内容

最新更新