on-click error on referenced SVG symbol

[nherment]

Bug Report

Context

In our application we use clickable SVG icons. Because we tend to reuse each icon multiple times in the HTML but still want to style them with CSS, they are embedded as a single bundle and then referenced throughout the HTML.

For example, a bundle with a single icon would look like the following where each symbol is a standalone SVG icon:

<svg>
  <symbol id="myIcon" width="100px"  height="125px" viewBox="0 0 100 125">
    <path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844  c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442  c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933  c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04  c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z   M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929  C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907  c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48  c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631  c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z   M50.01,86.723L27.73,49.13h44.541L50.01,86.723z"/>
  </symbol>
</svg>

To reference an icon in the bundle, one would write:

<svg on-click('increment')> 
  <use xlink:href="#myIcon" />
</svg>

Note that #myIcon references the symbol with id myIcon

Expected Behavior

The click handler is expected to be called whenever the user clicks in that icon.

Actual Behavior

This works fine in chrome and Firefox. However, most of our users use IE11.
In IE11, depending on which part of the icon is clicked, an error is thrown:

Object doesn't support property or method 'getAttribute'
File: util-browser.js, Line: 141, Column: 9

Possible Fix

I believe the bug is related to the behaviour described here: https://stackoverflow.com/questions/9275695/read-attributes-of-svg-elements-in-html-via-js

Additional Info

Your Environment

• Version used: [email protected]
• Environment name and version (e.g. Chrome 39, node.js 5.4): IE 11
• Operating System and version (desktop or mobile): Debian SID running virtualbox with IE11 image from windows
• Link to your project: Error can be reproduced with this code: https://github.com/Portchain/marko-svg-error

Steps to Reproduce

1. pull https://github.com/Portchain/marko-svg-error
2. run npm start
3. navigate to main page with IE11
4. Click on the first icon's black path, see error in IE console.

Stack Trace

Object doesn't support property or method 'getAttribute'
File: util-browser.js, Line: 141, Column: 9

[austinkelleher]

Thanks for the detailed report and reproducible repo! I will look into this soon.

[austinkelleher]

Published [email protected] with the fix. Thanks again for providing a detail report!

[nherment]

Thanks Austin. I really appreciate the quick turnaround.