Style tag with multiple urls, only the last url link is processed

[paul-sachs]

Do you want to request a feature, report a bug or ask a question?
Bug

What is the current behavior?
When processing an svg with the following syntax

<g id="linear-gradient-avatar-reverse-copy-5" style="fill: url(#twotoneGradient); mask: url(#avatarMask);"></g>

The following is output:

<g id="linear-gradient-avatar-reverse-copy-5" style="fill: url(#twotoneGradient); mask: url(#test_24_avatarMask);"></g>

What is the expected behavior?

It should output:

<g id="linear-gradient-avatar-reverse-copy-5" style="fill: url(#test_24_twotoneGradient); mask: url(#test_24_avatarMask);"></g>

Please tell us about your environment:

• Node.js version: 8.9.1
• webpack version: 4.8.3
• svg-sprite-loader version: 3.7.3
• OS type & version: macOS 10.13.6

[paul-sachs]

A quick workaround - define a separate fill rule:

<g id="linear-gradient-avatar-reverse-copy-5" fill="url(#twotoneGradient)" style="mask: url(#avatarMask);"></g>

[kisenka]

@psachs21 could you please give me a full SVG code?

[paul-sachs]

@kisenka the original had some copyrighted material but this example works too:

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
    <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
  </defs>

  <rect x="10" y="10" width="60" height="10" 
        style="fill: url(#Gradient01); mask: url(#myMask)" />
</svg>

[kisenka]

Fixed in v4.1.5