svg:title seems to be rendered with incorrect namespace

Marko Version: 4.15.2

Details

When using inline SVG in a .marko file the <title> tag of the svg seems to be rendered in the browser as the html <title> tag, so it does not show tooltips in the browser.

<svg viewBox="0 0 512 384">
    <g>
        <title>This is a tool tip</title>
        <path d="M 10 10 L 10 364 L 492 364 L 492 10 Z"/>
    </g>
</svg>

When I copy the generated html and paste it in a usual html file everything works fine. https://jsfiddle.net/jp4gz8dm/

I also tried adding xml-namespace

<svg viewBox="0 0 512 384" xmlns:svg="http://www.w3.org/2000/svg">
    <svg:g>
        <svg:title>This is a tool tip</svg:title>
        <svg:path d="M 10 10 L 10 364 L 492 364 L 492 10 Z"/>
    </svg:g>
</svg>

but the namespaces are only passed to the html (innerHTML ?) what the browser cannot interpret

Expected Behavior

When hovering the svg-path, the tooltip is shown.

Actual Behavior

The browser handles the tag like the HTML Title instead of the SVG Title.</p> <h3>Possible Fix</h3> <p>Either: detect that the <code><title></code> tag is inside the <code><svg></code> tag and adjust the namespace accordingly Or: add some support for assigning</p> <h3>Your Environment</h3>  <ul> <li>Environment name and version (e.g. Chrome 39, node.js 5.4): Firefox 65.0.1</li> <li>Can reproduce with: Google Chrome 72.0.3626.119 AND Edge: 18.17763</li> <li>Operating System and version (desktop or mobile): Windows10</li> <li>Link to your project: see code snippets above</li> </ul> <h3>Steps to Reproduce</h3> <p>To reproduce you can copy the code above and paste it here: <a rel="noreferrer nofollow" target="_blank" href="https://markojs.com/try-online/">https://markojs.com/try-online/</a> Pure HTML version can be seen here: <a rel="noreferrer nofollow" target="_blank" href="https://jsfiddle.net/jp4gz8dm/">https://jsfiddle.net/jp4gz8dm/</a></p> <p>Hover the black area, a tooltip should appear.</p> <p>inspect the HTML elements to see the differences </p> <h3>Stack Trace</h3> <p>not relevant</p> <h3>Related</h3> <p>this is probably related to #1098 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MuwuM"><img src="https://avatars.githubusercontent.com/u/1980040?v=4" />MuwuM</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@DylanPiercey thank you for providing the fix 👍 </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

marko-js / marko