svg显示欠压

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg显示欠压相关的知识,希望对你有一定的参考价值。

参考技术A 使用loader:
yarn add --dev svg-sprite-loader
在vue.config.js添加以下使用svg-sprite-loader:
chainWebpack:config=> const dir = path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') .test(/\.svg$/) .include.add(dir).end() .use('svg-sprite-loader').loader('svg-sprite-loader').options(extract:false).end() config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin', [plainSprite:true])) config.module.rule('svg').exclude.add(dir)

如何在react-native中显示动画svg?

如何在本机显示动画svg(带有关键帧)?目前,我只能显示静态SVG。

似乎react-native-svg仅能显示静态svg。

这里是SVG的摘要:

const xml = `<svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        width="64"
        height="64"
        viewbox="0 0 64 64">
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        <style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 
  0% 
    -webkit-transform: translate(0px,0px);
       -moz-transform: translate(0px,0px);
        -ms-transform: translate(0px,0px);
            transform: translate(0px,0px);
  

  50% 
    -webkit-transform: translate(2px,0px);
       -moz-transform: translate(2px,0px);
        -ms-transform: translate(2px,0px);
            transform: translate(2px,0px);
  

  100% 
    -webkit-transform: translate(0px,0px);
       -moz-transform: translate(0px,0px);
        -ms-transform: translate(0px,0px);
            transform: translate(0px,0px);
  


.am-weather-cloud-2 
  -webkit-animation-name: am-weather-cloud-2;
     -moz-animation-name: am-weather-cloud-2;
          animation-name: am-weather-cloud-2;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
          animation-iteration-count: infinite;


...

<SvgXml xml=xml width="100%" height="100%" />
答案

在本地显示SVG

Use react-native-svg or lottie-react-native
另一答案

我的建议是签出react native的lottie包,如果您可以将动画转换为lottie文件json,那么将很容易显示

以上是关于svg显示欠压的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native 上显示 SVG 文件?

iOS:显示来自 JSON 的 svg

Swiper滑块SVG图标有时不会在角度材料svg图标中显示

如何在react-native中显示动画svg?

如何使用 swift 显示 .svg 图像

React 中的 SVG 图标不显示