reactjs - 从 SVGator 导出的文件无法在 React 中编译

问题描述

这是我第一次发布问题。如果我不了解所有礼仪，请保持冷静。我正在使用内置 SVGator 的 SVG 动画。我将它作为加载页面加载到我的反应应用程序中。

SVG 文件本身在浏览器中显示良好，但是当我将它加载到我的 React 应用程序中时，我收到错误消息：

Failed to compile.

./src/assets/Loadingpage.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/Loadingpage.svg)

Error: Expected node, got `#eba7ha49d1l68_to {animation: eba7ha49d1l68_to__to 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l68_to__to { 0% {transform: translate(0px,0px);animation-timing-function: cubic-bezier(0.420000,0,1,1)} 16.666667% {transform: translate(0px,-50px)} 33.333333% {transform: translate(0px,-100px)} 100% {transform: translate(0px,-100px)} }#eba7ha49d1l68 {animation: eba7ha49d1l68_c_o 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l68_c_o { 0% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,1,1)} 23.333333% {opacity: 1} 33.333333% {opacity: 0} 100% {opacity: 0} }#eba7ha49d1l69_to {animation: eba7ha49d1l69_to__to 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l69_to__to { 0% {transform: translate(0px,0px)} 40% {transform: translate(0px,0px);animation-timing-function: cubic-bezier(0.420000,0,1,1)} 56.666667% {transform: translate(0px,-50.003000px)} 73.333333% {transform: translate(0px,-100.003000px)} 100% {transform: translate(0px,-100.003000px)} }#eba7ha49d1l69 {animation: eba7ha49d1l69_c_o 3000ms linear infinite normal forwards}@keyframes eba7ha49d1l69_c_o { 0% {opacity: 0} 40% {opacity: 0;animation-timing-function: cubic-bezier(0.420000,0,1,1)} 63.333333% {opacity: 1} 73.333333% {opacity: 0} 100% {opacity: 0} }`

这将我指向文件顶部的这个 CDATA：

    <style>
      <![CDATA[#eba7ha49d1l68_to {
        animation: eba7ha49d1l68_to__to 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l68_to__to {
        0% {
          transform: translate(0px, 0px);
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        16.666667% {
          transform: translate(0px, -50px)
        }
        33.333333% {
          transform: translate(0px, -100px)
        }
        100% {
          transform: translate(0px, -100px)
        }
      }
      
      #eba7ha49d1l68 {
        animation: eba7ha49d1l68_c_o 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l68_c_o {
        0% {
          opacity: 0;
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        23.333333% {
          opacity: 1
        }
        33.333333% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      
      #eba7ha49d1l69_to {
        animation: eba7ha49d1l69_to__to 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l69_to__to {
        0% {
          transform: translate(0px, 0px)
        }
        40% {
          transform: translate(0px, 0px);
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        56.666667% {
          transform: translate(0px, -50.003000px)
        }
        73.333333% {
          transform: translate(0px, -100.003000px)
        }
        100% {
          transform: translate(0px, -100.003000px)
        }
      }
      
      #eba7ha49d1l69 {
        animation: eba7ha49d1l69_c_o 3000ms linear infinite normal forwards
      }
      
      @keyframes eba7ha49d1l69_c_o {
        0% {
          opacity: 0
        }
        40% {
          opacity: 0;
          animation-timing-function: cubic-bezier(0.420000, 0, 1, 1)
        }
        63.333333% {
          opacity: 1
        }
        73.333333% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      
      ]]>
    </style>

当我将其注释掉时，它似乎修复了我整个文档中的其余<rect>and<path>标记，并且我的应用程序可以正常编译。当我在我的应用程序中将 SVG 作为加载页面点击时，它显示正常，但动画不起作用。

我对使用 SVG 还是很陌生，而 CDATA 对我来说是 100% 的新手。任何帮助将不胜感激。谢谢！

编辑：我仍然不确定为什么，但删除包装 <![CDATA...]]> 标签并保持 CSS 样式解决了我的问题。

标签： reactjsanimationsvgcdatasvgator

我也是新手，但我找到了一个简单的解决方案，我希望它对你有用，这仍然对我有用。

下载 SVG 文件：“svgator”
将 SVG 文件放在你最想要的 React 应用程序中，在我的例子中是在 assets 文件夹中： SVG
在您的组件中导入 SVG 文件，在我的例子中是在 App.js 文件中。测试.svg
我的“App.js”文件，被声明为一个类组件，在渲染方法之后的return语句中，你可以放置“object”标签，将SVG组件作为数据参数。“目的”

在这种情况下，您不需要从任何地方删除任何内容，很简单，但希望这对您有用。

reactjs - 从 SVGator 导出的文件无法在 React 中编译

问题描述

解决方案

推荐阅读