Vue-svg-loader: SVG class used twice displays as black instead of fill color

Created on 20 Apr 2020 · 3Comments · Source: visualfanatic/vue-svg-loader

I have an svg with 3 different classes that have 3 different fill color properties. I am using two of the classes for two different paths/polygons and those paths/polygons display as fill black rather than the styled color. When I remove the second usage of the class the first displays fine, also if I change the second usage to the same fill color but a different class name it works fine.

Here is my SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 3600 3600" style="enable-background:new 0 0 3600 3600;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#CF4545;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#922727;}
</style>
<path class="st0" d="M1845.4,46.2L3585,1798.6c0,0-1780.2,1785.2-1794.6,1742.2c-14.3-43-1807.6-1746.6-1764.7-1760.9
    C68.7,1765.6,1845.4,46.2,1845.4,46.2z"/>
<path class="st1" d="M1812.2,1065l734.1,734.1c0,0-734.1,745.9-740,728.1c-5.9-17.8-763.6-740-745.9-745.9
    C1078.1,1775.4,1812.2,1065,1812.2,1065z"/>
<path class="st0" d="M1839.1,1394l396.7,396.7c0,0-396.7,403.1-399.9,393.5c-3.2-9.6-412.7-399.9-403.1-403.1
    C1442.4,1777.9,1839.1,1394,1839.1,1394z"/>
<path class="st2" d="M2235.7,1790.7l-399.9,393.5l-403.1-403.1C1432.8,1781.1,2254.8,1790.7,2235.7,1790.7z"/>
<polygon class="st2" points="3585,1798.6 2538.2,1798.6 1812.9,2527.6 1057.6,1787.4 25.8,1779.9 1807.2,3561.4 "/>
</svg>

The two paths with class="st0" display as black rather than #CF4545
The path and polygon with class="st2" display as black rather than #922727
The path with `class="st1" displays white correctly

Source

psulkava

👍5

Most helpful comment

Just ran into something that sounds similar to this issue. There's an upstream dependency on svgo which defaults to only updating the first element with a matching class when inlining styles. Not sure that's a sensible default here but you could try changing it by configuring your vue.config like this:

svgRule
  .use('babel-loader')
  .loader('babel-loader')
  .end()
  .use('vue-svg-loader')
    .options({
      svgo: {
        plugins: [{ inlineStyles: { onlyMatchedOnce: false } }]
      }
    })
  .loader('vue-svg-loader');

pat-flew on 19 May 2020

❤2 👍1

All 3 comments

svgRule
  .use('babel-loader')
  .loader('babel-loader')
  .end()
  .use('vue-svg-loader')
    .options({
      svgo: {
        plugins: [{ inlineStyles: { onlyMatchedOnce: false } }]
      }
    })
  .loader('vue-svg-loader');

pat-flew on 19 May 2020

❤2 👍1

Thanks @pat-flew! That did indeed fix the issue I was seeing.

psulkava on 19 May 2020

didnt work for me though...