How can I include SVG in a Lightning Component in my coding?
I'm trying to animate a circular countdown timer for my lightning component, but it seems I can't use SVG tags (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_supported_html_tags.htm). Should I abandon SVG all together for all lightning components, or is there some alternative?
If you are facing lightning svg then you that is a bug, although there is a simple workaround. In your component markup put the SVG in a DIV, wrapped with a CDATA block:
<div aura:id="svg_content"> <![CDATA[ <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"> <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"> </g> </svg> ]]> </div>In the renderer for the component, add the following in afterRender:
({ afterRender: function(component, helper) { var svg = component.find("svg_content"); var value = svg.getElement().innerText; value = value.replace("", ""); svg.getElement()[removed] = value; } })I will check for a bug on this and open one if not.