Как использовать SVG-Uri в React-native или Expo? - PullRequest
Новая
       56

Как использовать SVG-Uri в React-native или Expo?

2 голосов
/ 22 мая 2019

Я загрузил модуль expo-svg-uri , чтобы использовать образ Svg.

Но изображение не получается.

Код, который мне не удалось: 

  <View style={styles.container}>
    <SvgUri
      width="200"
      height="200"
      source={require("../../image/minigroup.svg")}
    />
  </View>

Изображение с ошибкой

svg

Исходное изображение

sucess image

это мой svgfile 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="183" viewBox="0 0 80 183">
    <defs>
        <circle id="b" cx="35" cy="35" r="35"/>
        <filter id="a" width="142.9%" height="142.9%" x="-21.4%" y="-21.4%" filterUnits="objectBoundingBox">
            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
        <circle id="d" cx="35" cy="34" r="24"/>
        <filter id="c" width="168.8%" height="168.8%" x="-28.1%" y="-28.1%" filterUnits="objectBoundingBox">
            <feOffset dx="3" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
        <circle id="f" cx="35" cy="34" r="12"/>
        <filter id="e" width="208.3%" height="208.3%" x="-45.8%" y="-45.8%" filterUnits="objectBoundingBox">
            <feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"/>
            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <text fill="#646464" font-family="Bungee-Regular, Bungee" font-size="20" letter-spacing="-.375">
            <tspan x="6.107" y="163">Point</tspan>
        </text>
        <text fill="#3D3D3D" font-family="Bungee-Regular, Bungee" font-size="20" letter-spacing="-.375">
            <tspan x="20.282" y="140">Tap</tspan>
        </text>
        <g transform="translate(5 5)">
            <rect width="70" height="81" y="28" fill="#FFD90D" rx="12"/>
            <use fill="#000" filter="url(#a)" xlink:href="#b"/>
            <use fill="#FFD90D" xlink:href="#b"/>
            <use fill="#000" filter="url(#c)" xlink:href="#d"/>
            <use fill="#FFD90D" xlink:href="#d"/>
            <g>
                <use fill="#000" filter="url(#e)" xlink:href="#f"/>
                <use fill="#FFD90D" xlink:href="#f"/>
            </g>
        </g>
    </g>
</svg>

У меня нет значения пути, я только рисую все это,Вы говорите, что это возможно?

Пожалуйста, помогите нам.Заранее спасибо.

1 Ответ

2 голосов
/ 22 мая 2019

Первый

  • Перетащите файл SVG в этот онлайн-инструмент SVGOMG
  • Переключитесь на вкладку Разметка.
  • Копировать d атрибут тега path xml.

Секунда

act-native-svg уже установлен и связан, если вы используете expo

Пример, который будет отображать значок Home: 

<Svg
  width="20"
  height="20"
  viewBox="0 0 512 512" // Has to be the same of the original svg file
>
  <Path
    d="M208 448V320h96v128h97.6V256H464L256 64 48 256h62.4v192z"
    fill="red"
  />
</Svg>

Это также сэкономит вам расходы на загрузку и чтение файла ...

...