0

我将 3/4 SVG 导入 next.js 页面，但显示不起作用。好像ID有冲突...

我试图从草图更改掩码 ID 和不同导出，它在 svgomg 查看器中有效，但在页面中无效。我还尝试了一些来自社区的组件但没有成功，并编辑了我的 babelrc/webpack 配置。

我的背景 ：

<svg viewBox="0 0 1440 850" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
      <stop stop-color="#151B4A" offset="0%"/>
      <stop stop-color="#464D89" offset="100%"/>
    </linearGradient>
    <path d="M3 0h1434a3 3 0 0 1 3 3v844a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z" id="a"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="c" fill="#fff">
      <use xlink:href="#a"/>
    </mask>
    <use fill="url(#b)" xlink:href="#a"/>
    <g mask="url(#c)" fill="#FFF">
      <path d="M78 197h112c6.627 0 12 5.373 12 12s-5.373 12-12 12H78c-6.627 0-12-5.373-12-12s5.373-12 12-12z" opacity=".089"/>
      <path d="M141 729h25a7 7 0 0 1 0 14h-25a7 7 0 0 1 0-14z" opacity=".039"/>
      <path d="M1329 129h68c5.523 0 10 4.477 10 10s-4.477 10-10 10h-68c-5.523 0-10-4.477-10-10s4.477-10 10-10z" opacity=".114"/>
      <path d="M758 282h122a7 7 0 0 1 0 14H758a7 7 0 0 1 0-14zM910 195h17a7 7 0 0 1 0 14h-17a7 7 0 0 1 0-14z" opacity=".046"/>
      <path d="M209 164h49a7 7 0 0 1 0 14h-49a7 7 0 0 1 0-14zM438 653h49a7 7 0 0 1 0 14h-49a7 7 0 0 1 0-14z" opacity=".043"/>
    </g>
  </g>
</svg>

我的山：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 288">
  <defs>
    <linearGradient id="b" x1="65.162%" x2="65.162%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#A7A7EE" stop-opacity="0"/>
      <stop offset="100%" stop-color="#464D89" stop-opacity=".3"/>
    </linearGradient>
    <path id="a" d="M1 346.117c117.633 2.5 275.882-64.626 474.749-201.377C672.352 8.138 875.369-31.718 1084.802 25.172L1419 859H1V346.117z"/>
    <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#464D89"/>
      <stop offset="100%" stop-color="#5D66B2" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="#464D89" stop-opacity="0"/>
      <stop offset="100%" stop-opacity=".2"/>
    </linearGradient>
    <path id="d" d="M0 530.431c206.555 106.394 407.377 75.963 602.468-91.294 185.657-159.17 518.841-79.615 556.826-141.272 37.985-61.657-339.182-167.515-339.182-209.904 0-28.26 87.65-49.246 262.949-62.961L1957 312.948V861H0V530.431z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 1874 0)">
    <use fill="#5B64B0" xlink:href="#a"/>
    <use fill="url(#b)" xlink:href="#a"/>
    <path fill="url(#c)" d="M1 424.156c200.18 36.139 417.272-46.015 651.274-246.462s436.545-174.087 607.629 79.08v363.587H1V424.156z"/>
    <use fill="#464D89" xlink:href="#d"/>
    <use fill="url(#e)" xlink:href="#d"/>
  </g>
</svg>

我的组件导入：

<Stars preserveAspectRatio="xMinYMin meet" className="error404__stars" />
<Mountains preserveAspectRatio="xMidYMax meet" className="error404__mountain" />

一个矩形不应该出现，山应该是完整的，显示良好。我的 React 应用程序的许多 SVG 中都有这个问题。我不知道如何以最佳方式封装我的 SVG，我需要保留纵横比属性。

4

0 回答 0