Lwc: Self closing <animateTransform> and <path> fails at compilation

[narendrasinghrathore]

Description

Using svg in template or component. Getting error at compiler and linter.

Steps to Reproduce

Add svg in component html file and complier generate error

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

[narendrasinghrathore]

It generated error first for <path> i.e. has no matching closing tag, i manually added closing tag for that ( problem solved or you can say no lint or compiler error ).
Second error for <animateTransform> i.e. has no matching closing tag, i manually added closing tag for same, but getting same error.

[dahnielkim]

I am getting this error only when running jest-tests. Any insight?

[caridy]

cc @apapko @ravijayaramappa

[pmdartus]

The template compiler has an incomplete least of self-closing elements (code).

[git2gus[bot]]

This issue has been linked to a new work item: W-7412739

[dahnielkim]

Are there any updates regarding fixing this issue?

[diervo]

Right now the team doesn't have bandwidth for this issue, and we will get to it whenever we have some spare time. That being said you have two options:

1) You can issue a PR and fix it!, we can guide you on where the code is to get started)

2) A trivial alternative is, you can just make those tags non self closing:

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M19.4"></path>
  <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"></animateTransform>  
                        </svg>

I know that works because I took this code (and simplified it) from a production app, and I remember fixing partially long time ago. You should be unblocked, but you should consider option 1 :)