Как исправить встроенный SVG с отличным отображением в программе просмотра, но не на странице? - ReactJS импорт - PullRequest
Новая
       47

Как исправить встроенный SVG с отличным отображением в программе просмотра, но не на странице? - ReactJS импорт

0 голосов
/ 18 января 2019

Я импортирую 3/4 SVG на страницу next.js, и дисплей не работает. Кажется, 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" />

Один прямоугольник не должен появляться, и гора должна быть полна с хорошим отображением. У меня есть эта проблема во многих SVG моего приложения React. Я не знаю, как лучше всего инкапсулировать SVG, и мне нужно свойство сохранения пропорций.

...