refx and refy support in svg

[yanfali]

Stencil version:

 @stencil/core@1.14.0

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

I can no longer use refx and refy in marker svg that I was able to use in versions prior to 1.8

             <marker
                  id="arrow"
                  markerWidth="10"
                  markerHeight="10"
                  refX="0"
                  refY="3"
                  orient="auto"
                  markerUnits="strokeWidth"
                >
                 <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
             </marker>

Error manifests itself as

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.tsx:179:15
           Type '{ id: string; markerWidth: string; markerHeight: string; refX: string; refY: string; orient: string;
           markerUnits: string; }' is not assignable to type 'SVGAttributes<SVGElement>'.Property 'refX' does not exist
           on type 'SVGAttributes<SVGElement>'.

    L178:  markerHeight="10"
    L179:  refX="0"
    L180:  refY="3"

Expected behavior:

I should be able to use refX and refY in the markup without typescript flagging this as an error. This behavior changed and makes my rendered arrows incorrect.

Steps to reproduce:

You should be able to drop the marker example above into a TSX file to see the error.

Related code:

// insert any relevant code here

Other information:

This bug is similar to #1601
MDN docs https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refX
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refY