我不确定为什么这不会出现。我怀疑它可能与变换有关吗？
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
但我真的不知道......我看到“无效道具变换”
当我复制SVG代码形式草图时，怀疑我在这个问题上遇到了类似的问题：
https://github.com/react-native-community/react-native-svg/issues/205
代码如下。有什么想法吗？
import React from 'react';
import { Svg } from 'expo';
const RocketSvg = () => {
return (
<Svg width="108px" height="128px" viewBox="135 76 108 128" version="1.1">
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
<Svg.Ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></Svg.Polygon>
<Svg.Path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></Svg.Path>
<Svg.Circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></Svg.Path>
<Svg.Rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" width="8" height="4"></Svg.Rect>
<Svg.Path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></Svg.Polygon>
<Svg.Path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></Svg.Path>*/}
</Svg.G>
</Svg>
);
}
答案 0 :(得分：0)
回答关注Tranform
transform propType目前不支持react-native-svg（2017年6月4日）
但是，您可以改为使用x和y道具：
<Svg.G x="135.000000" y="76.000000" id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
修复SVG
但是你粘贴的SVG似乎仍然无法呈现。
我首先将其转换回SVG并使用Sketch重新导出。
// logo.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="108px" height="128px" viewBox="0 0 108 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="so" fill-rule="nonzero">
<ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></ellipse>
<path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></path>
<polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></polygon>
<path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></path>
<circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></circle>
<path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></path>
<rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" width="8" height="4"></rect>
<path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></path>
<path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></path>
<polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></polygon>
<polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></polygon>
<polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></polygon>
<polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></polygon>
<path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></path>
</g>
</g>
</svg>
然后我使用msvgc将其转换为react-native-svg兼容组件。最后使用import { Svg } from 'expo'进行更改。您会注意到无论如何都不再进行转换，因此不需要原始问题。
// Logo.js
import React from 'react'
import { Svg } from 'expo'
const logo = props => (
<Svg width={props.width || 108} height={props.height || 128} viewBox="0 0 108 128">
<Svg.G fillRule="nonzero" fill="none">
<Svg.Ellipse fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764 76.608C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zM46 84v-4h16v4H48z" fill="#FFF"></Svg.Path>
<Svg.Path d="M70 78V42C70 18 54 2 54 2v76h16z" fill="#DCDDDE"></Svg.Path>
<Svg.Circle fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8 100.76a51.654 51.654 0 0 1-7.84 10.02 51.539 51.539 0 0 1-7.64 6.3c-17.58 11.94-40.86 11.9-58.4-.12a50.5 50.5 0 0 1-7.48-6.18 52.123 52.123 0 0 1-8.06-10.38C11.4 96.6 15.4 94 20 94c5.48 0 10.1 3.7 11.54 8.74C33.3 99.9 36.42 98 40 98a10 10 0 0 1 9.8 8h.2V86h8v20h.2a10 10 0 0 1 9.8-8c3.58 0 6.7 1.9 8.46 4.74C77.88 97.7 82.5 94 88 94c4.74 0 8.84 2.76 10.8 6.76z" fill="#FFD768"></Svg.Path>
<Svg.Path fill="#DCDDDE" d="M54 80h8v4h-8z"></Svg.Path>
<Svg.Path d="M91.414 36.586L90 35.172 87.172 38l1.414 1.414C98.67 49.5 104 61.458 104 74c0 8.056-1.904 15.812-5.478 22.778A13.905 13.905 0 0 0 88 92c-5.052 0-9.646 2.752-12.106 6.988A11.857 11.857 0 0 0 68 96a12.009 12.009 0 0 0-8 3.062V88h6v-8h6v-2.156c5.584.702 10.886 3.82 10.966 3.87L86 83.538V80c0-9.762-5.136-19.778-14-22.948V42C72 17.454 56.092 2.09 55.414 1.414L54 0l-1.414 1.414C51.908 2.09 36 17.454 36 42v15.052C27.136 60.222 22 70.238 22 80l.002 3.538 3.032-1.824c.082-.05 5.384-3.172 10.966-3.872V80h6v8h6v11.062A12.009 12.009 0 0 0 40 96a11.85 11.85 0 0 0-7.9 2.994C29.628 94.754 25.036 92 20 92c-4.09 0-7.884 1.794-10.514 4.794C5.906 89.824 4 82.06 4 73.998 4 61.458 9.33 49.5 19.414 39.414L20.828 38 18 35.172l-1.414 1.414C5.736 47.438 0 60.376 0 73.998c0 14.426 5.618 27.986 15.816 38.186C26.344 122.71 40.172 128 54 128c13.828 0 27.656-5.29 38.184-15.816C102.382 101.984 108 88.424 108 74c0-13.624-5.736-26.562-16.586-37.414zm-9.65 40.022C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zm6 8v-4h16v4H46zm43.356 25.356c-19.496 19.494-51.216 19.494-70.71 0a50.398 50.398 0 0 1-7.012-8.798C13.48 97.732 16.598 96 20 96c4.436 0 8.39 2.998 9.618 7.29l1.242 4.348 2.38-3.844c1.472-2.376 4-3.794 6.76-3.794 3.794 0 7.092 2.69 7.838 6.394l.326 1.606H52V88h4v20h3.836l.324-1.606C60.908 102.69 64.206 100 68 100c2.76 0 5.288 1.418 6.76 3.792l2.394 3.864 1.232-4.374C79.592 98.994 83.546 96 88 96c3.426 0 6.528 1.718 8.372 4.55a50.456 50.456 0 0 1-7.016 8.806z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54 34c-4.412 0-8 3.588-8 8s3.588 8 8 8 8-3.588 8-8-3.588-8-8-8zm0 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zM78 16h4v-4h4V8h-4V4h-4v4h-4v4h4zM14 26h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM96 32h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM84 46v2h-2v4h2v2h4v-2h2v-4h-2v-2zM26 44h4v-2h2v-4h-2v-2h-4v2h-2v4h2zM26 8h4V6h2V2h-2V0h-4v2h-2v4h2z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176z" fill="#F37053"></Svg.Path>
</Svg.G>
</Svg>
)
export default logo