Lwc: SVG Linear Gradient Tag throwing error - 1078: has no matching closing tag

[AlexBryner]

Description

Using a Linear Gradient Tag within SVGs throws an error for missing a matching tag. The tags can be applied to the svg with javascript, but there are errors thrown when the template is compiled with SVG Linear Gradient tags.

Playground Link

https://developer.salesforce.com/docs/component-library/tools/playground/lq-8iCl3B/9/edit

[caridy]

Thanks for the report @AlexBryner, this seems to be a problem in the compiler. I don't think we have provision for special tagNames like linearGradient, which happens to be camel cased. That's not very common in HTML, I don't recall any other element with similar form. Details are here:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

I suspect we can add the exception in the compiler to allow such tagName. /cc @jodarove @ravijayaramappa

[quinnmcphail]

Hi there! Do you mind if I give this a shot?

[caridy]

@quinnmcphail go for it! If you need guidance, just let us know... @ravijayaramappa and @ekashida are now experts on the compiler.

[quinnmcphail]

It looks like the parse5 package used to parse the HTML for LWC doesn't like a lot of SVG tags.

When I ran a snippet of SVG code through the parse5 playground, it picked up the startTag location for all of the tags but not the endTag location.

It doesn't matter if the tags are camel-cased or not, the <stop> and <circle> tags I used didn't have endTag locations present.

I guess this has to do with parse5 adhering to the HTML spec and not the SVG spec, so those tags might not work correctly.

I did manage to include an SVG file in an <img> tag and it worked, although, I had to make sure that the xmlns SVG attribute was set.

[diervo]

Let me talk to Ivan the owner of parse5 see if he would be ok introducing this changes on the parser

[dahnielkim]

Are there any updates to this issue? We are running into a similar issue with other tagNames like animateTransform if it's embedded inside of a svg tag.

[diervo]

So we have a forked version of parse5 so we can technically add some of this there.
We are waiting for a report from the security team making sure we are whitelisting all the dangerous ones, I hope we can add those two soon.

[saoirse-zee]

Running into the same issue with svg tags like feGaussianBlur. There are upwards of 17 of these svg filters. I'd love to see them all added. Thanks for your work on this!

[narendrasinghrathore]

So is it being resolved, or need some tweaks @diervo @caridy

[diervo]

If something still missing file a new issue.

On Tue, Mar 24, 2020 at 11:07 PM Narendra Singh Rathore <
[email protected]> wrote:

So is it being resolved, or need some tweaks @diervo
https://github.com/diervo @caridy https://github.com/caridy

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/salesforce/lwc/issues/1367#issuecomment-603658839,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAI7JKCC7Z4E4Y7T3D6VLZ3RJGNSBANCNFSM4HZ4VMAA
.

[LBSInteractive]

Hello @diervo, Is the problem resolved?

[diervo]

This is issue its been close because the fix has been implemented.

While you can't use unary tags since we have to change the html parser which is tricky and time consuming, you can use any filter tag as long as you close the tag like you would do for any non-unary element.

Here is a contrived example that compiles an works:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
        <desc>Produces a 3D lighting effect.</desc>
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"></feGaussianBlur>
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"></feOffset>
        <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
                            specularExponent="20" lighting-color="#bbbbbb"
                            result="specOut">
          <fePointLight x="-5000" y="-10000" z="20000"></fePointLight>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"></feComposite>
        <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
                     k1="0" k2="1" k3="1" k4="0" result="litPaint"></feComposite>
        <feMerge>
          <feMergeNode in="offsetBlur"></feMergeNode>
          <feMergeNode in="litPaint"></feMergeNode>
        </feMerge>
      </filter>
      </svg>

If a particular filter or element within an svg does not work feel free to file a seprate issue with a repro and details.