Problem with 'onclick' on SVG elements

I’m building an SPA that shall make extensive use of SVG. This far I have not been able to get any form of ‘onclick’ working on my SVG elements. I have tried both $onclick="test" and onclick={e => this.run("test", e)}, in elements like these:

<circle cx={cx} cy={cy} r={rad} $onclick="test"/>
<rect x="8" y="8" width="90" height="90" stroke="blue" onclick={e => this.run("test", e)}/>

This, however, works fine: <h1 onclick={e => this.run("test", e)}>TEST</h1> I’m using apprun 2.23.12. Is this a bug?

[yysun]

It is now fixed in v2.23.13. I also added it as an example in the playground. https://apprun.js.org/#play/23

[yysun]

I see. Then it appears to be a bug. Will fix it.

On Mon, Apr 13, 2020 at 4:16 PM Jon Kleiser [e-mail] wrote:

You can try with this, e.g. inside the SPA’s ContactComponent:

<svg viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="90" height="40" onclick={e => this.run("test", e)}/> <rect x="10" y="80" width="90" height="40" onclick="alert('You have clicked the rect.')"/> </svg>

and then this:

update = { “test”: (state, evt) => { console.log(“test: %s”, evt.target); return state; } }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yysun/apprun/issues/94#issuecomment-613076774, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABJUM7LDS6OJXJMERQ5SZTRMNXK5ANCNFSM4MG7ROSA .