不正確的路徑渲染反應母語-SVG

使用Inkscape中，我創建從PNG SVG文件，然後我試圖做出反應，本機SVG使用其路徑的d（這是由Inkscape中產生的），但我失敗了。這是我的代碼，但它呈現只給出填充顏色rectanagle：不正確的路徑渲染反應母語-SVG

import React from 'react'; 
import styled from 'styled-components/native'; 
import { withTheme } from 'styled-components'; 
import Svg, { Path } from 'react-native-svg'; 

const StyledPart = styled.View` 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
`; 

const StyledWaveBackground = styled.View` 
    width: 100%; 
    height: 100%; 
    position: relative; 
`; 

const Part = ({ width, height, fill, d }) => (
    <StyledPart> 
    <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}> 
     <Path d={d} fill={fill} /> 
    </Svg> 
    </StyledPart> 
); 

const WaveBackground = ({ width, height, theme }) => (
    <StyledWaveBackground> 
    <Part 
     width={width} 
     height={height} 
     fill={theme.color.primary} 
     d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z" 
    /> 
    <Part 
     width={width} 
     height={height} 
     fill={theme.color.primary} 
     d="M 120,254.17154 C 81.92867,250.44385 47.75997,241.17995 15.9375,225.95786 L 0,218.33426 0,109.16713 0,0 256.875,0 513.75,0 l 0,106.73949 0,106.73949 -2.82013,0.70781 c -1.55107,0.38928 -11.53545,1.66099 -22.1875,2.82599 -28.98642,3.17021 -64.58588,2.85335 -96.24237,-0.85663 -21.29589,-2.49576 -31.64353,-3.00549 -61.25,-3.01714 -32.18921,-0.0126 -36.98349,0.26131 -49.71091,2.84071 -14.16663,2.87109 -33.00602,9.07774 -66.53909,21.92134 -23.25836,8.90826 -36.6669,12.75144 -52.89669,15.16133 -11.77822,1.7489 -30.52554,2.24276 -42.10331,1.10915 z" 
    /> 
    </StyledWaveBackground> 
); 

export default withTheme(WaveBackground);

這是它呈現爲結果（只彩色recatngle） current render result

但它應該是這樣的（揮動背景） correct render result

PS：我在真實設備（未模擬器）魅族M3E，測試它是否重要

來源

2017-10-05 Ильяс Хаметов

最重要的部分 - 對WIDT值您使用的高度和高度以及由此產生的viewBox - 都會丟失。這看起來不錯：

<svg width="200" height="100" viewBox="0 0 600 300"> 
 
     <path fill="green" 
 
     d="M 203.75,239.89934 C 142.14982,233.15571 74.42389,213.31632 19.88109,186.03745 L 0,176.09419 0,88.047087 0,0 256.25,0 512.5,0 l 0,87.952377 0,87.952383 -8.212,0.84135 c -19.97561,2.04655 -50.95386,8.64648 -74.52537,15.87764 -8.7243,2.6764 -30.4419,10.7209 -48.26133,17.87666 -49.04169,19.6937 -70.93005,25.94725 -103.01454,29.43144 -13.91836,1.51146 -60.81961,1.49106 -74.73676,-0.0325 z" 
 
    /> 
 
</svg>

來源

2017-10-05 03:29:39

我有柔性的寬度100％的標頭和高度：28，我想這波背景，以匹配頭的尺寸。但是當我設置這個wave背景的widht和height等於header的時候，我只會得到彩色的reactangle。有什麼辦法可以將這些svg調整爲標題的widht和height，但仍然可以正確顯示嗎？ –

不正確的路徑渲染反應母語-SVG

回答

相關問題