Проблемы с градиентом SVG в Webpack

Question

Я пытаюсь создать svg-спрайты с помощью webpack и svg-spritemap-webpack-plugin. Хотя он создает красивые спрайты с обычными SVG, он не отображает SVG с градиентами, и я не могу понять почему.

Фрагмент конфига webpack, связанный с генерацией спрайтов:

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: true,
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),

Значок svg, с которым я пытаюсь работать:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-35.2988" y1="646.7559" x2="-35.2988" y2="623.7559" gradientTransform="matrix(22.2609 0 0 -22.2609 1041.7826 14397.3477)">
    <stop  offset="0" style="stop-color:#1AD6FD"/>
    <stop  offset="1" style="stop-color:#1D67F0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M367.304,133.565H11.13c-6.144,0-11.13,4.986-11.13,11.13V500.87
    C0,507.014,4.986,512,11.13,512h356.174c6.144,0,11.13-4.986,11.13-11.13V144.696C378.435,138.552,373.448,133.565,367.304,133.565
     M512,11.13v356.174c0,6.144-4.986,11.13-11.13,11.13h-89.043c-6.144,0-11.13-4.986-11.13-11.13v-244.87
    c0-6.144-5.009-11.13-11.13-11.13h-244.87c-6.144,0-11.13-4.986-11.13-11.13V11.13c0-6.144,4.986-11.13,11.13-11.13H500.87
    C507.014,0,512,4.986,512,11.13"/>
</svg>

Кажется, что он правильно передан спрайту (с градиентом и правильными идентификаторами), но все же я вижу слепое пятно вместо значка, когда пытаюсь его использовать.

Кроме того, похоже, что эта проблема не связана с svgo и его настройками. Если я удалю svgo и svg4everybody из своей конфигурации, я все равно не вижу значок (в то время как другие значки со стилями только для заливки видны)

html svg webpack

2

Natalia Davydova 24 Окт 2020 в 17:20

Answer 1

Решилось дополнительными настройками svg4everybody:

new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
      output: {
        filename: 'assets/sprites/sprites-colored/sprites.svg',
        svg4everybody: {
           polyfill: true // this line makes things work
        },
        svgo: {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { minifyStyles: true },
            { cleanupIDs: { minify: false }}
          ]
        }
      },
      sprite: {
        prefix: false
      }
    }),

0

Natalia Davydova 24 Окт 2020 в 18:32

Answer 2

Я не могу комментировать Webpack, не использую его, но, строго говоря, ваш тег linearGradient должен находиться внутри тега defs , чтобы на 100% соответствовать спецификации SVG 1.1.

И еще одна вещь, которую вы можете попробовать, - использовать полностью открытые и закрывающие теги, чтобы <.path>... (без точек для отображения здесь) вместо сокращенного < путь ... /> . Часто валидаторы задыхаются от сокращенных тегов, поскольку это не совсем правильная иерархия для строгого парсера SVG / XML. Имея это в виду, вы также можете попробовать отказаться от тега xml .

0

Matt Sergej Rinc 24 Окт 2020 в 18:02

Проблемы с градиентом SVG в Webpack

2 ответа

Похожие вопросы

Новые вопросы

html