Emberjs handle svg action

Emberjs handle svg action

2017, Apr 17    

Sample code: http://jsbin.com/pebohe/edit?html,js,output

Simply, add {{action “doSomething”}} to SVG g item.


...
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"     
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewbox="0 0 200 200"
     >
    <g>
       <text style="cursor:pointer" {{action "go"}}
               x="0" y="20" width="200" height="30">
           works on both
       </text>
       <a xlink:href="#" {{action "go"}}>
           <text x="0" y="40" width="200" height="30">
               works on both
           </text>
       </a>
       <a xlink:href="#" {{action "go"}} >                                                   
           <g>
               <use x="0" y="50" width="15" height="15"
                   xlink:href="#test"/>
               <text x="20" y="60">click dot</text>
           </g>
       </a>
   </g>            
</svg>