SVG file rendring in fnRowCallback

sandeepfis

Hi, I want to use svg file for edit update icon in datatable. But it is rendering as simple img tag instead of svg. My fnRowCallback code is:

$('td:eq(4)', nRow).html("<a class='commentcount' href='/tickets/detail/" + aData[2] + "#attachments'><img style='cursor: pointer;' title='attachement' class='inject icon-comment' src ='/Assets/Extranet/Images/icon-attachment.svg' alt='attachement'></a>");

allan

Its using an img tag because that is what your code uses. I'm not sure I understand the issue I'm afraid. Can you link to the page as well please.

Allan

sandeepfis

Below code render svg tag in browser:

<img src="Assets/Extranet/images/icon-comment.svg" alt="comment" class="inject icon-comment">

Browser rendering:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 23 18.8" style="opacity: 1;" xml:space="preserve" class="injected-svg inject icon-comment">
<title>icon-comment</title>
<path d="M16,8.6c-0.2,0-0.5,0.1-0.7,0.1C15,8.3,14.5,8,14,8c-0.2,0-0.5,0.1-0.7,0.1c-0.3-0.5-0.8-0.8-1.4-0.8c-0.1,0-0.3,0-0.4,0.1 V4.9c0-0.9-0.7-1.6-1.6-1.6C8.9,3.3,8.2,4,8.2,4.9v4.4c-0.1,0-0.3-0.1-0.4-0.1c-0.9,0-1.6,0.7-1.6,1.6v2.5c0,4,2.3,5.4,2.4,5.5 c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.7-0.2-0.8c0,0-1.8-1.1-1.8-4.4v-2.5c0-0.2,0.2-0.4,0.4-0.4 c0.2,0,0.4,0.2,0.4,0.4v1.2c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6V4.9c0-0.2,0.2-0.4,0.4-0.4c0.2,0,0.4,0.2,0.4,0.4V9v1.2 c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6V9c0-0.2,0.2-0.4,0.4-0.4c0.2,0,0.4,0.2,0.4,0.4v0.6v0.6v0.6c0,0.3,0.3,0.6,0.6,0.6 c0.3,0,0.6-0.3,0.6-0.6v-0.6V9.6c0-0.2,0.2-0.4,0.4-0.4c0.2,0,0.4,0.2,0.4,0.4v0.6v0.6v0.6c0,0.3,0.3,0.6,0.6,0.6 c0.3,0,0.6-0.3,0.6-0.6v-0.6v-0.6c0-0.2,0.2-0.4,0.4-0.4c0.2,0,0.4,0.2,0.4,0.4v3.1c0,3.3-1.7,4.4-1.8,4.4c-0.3,0.2-0.4,0.6-0.2,0.8 c0.1,0.2,0.3,0.3,0.5,0.3c0.1,0,0.2,0,0.3-0.1c0.1-0.1,2.3-1.5,2.3-5.5v-3.1C17.7,9.4,16.9,8.6,16,8.6"></path>
<path d="M6.7,8C7,7.8,7.1,7.4,6.9,7.1C6.4,6.5,6.2,5.7,6.2,4.9c0-2,1.7-3.7,3.7-3.7c2,0,3.7,1.7,3.7,3.7c0,0.4-0.1,0.8-0.2,1.1 c-0.1,0.3,0.1,0.7,0.4,0.8c0.3,0.1,0.7-0.1,0.8-0.4c0.2-0.5,0.2-1,0.2-1.5c0-2.7-2.2-4.9-4.9-4.9S4.9,2.2,4.9,4.9c0,1,0.3,2,0.9,2.9 C6,8,6.2,8.1,6.4,8.1C6.5,8.1,6.6,8,6.7,8"></path>
</svg>

If same code I write in rowCallback event its render below code:

<img style="cursor: pointer;" title="attachement" class="inject icon-comment" src="/Assets/Extranet/Images/icon-attachment.svg" alt="attachement">

sandeepfis

further to my previous reply.. I want rowcallback code ($('td:eq(4)', nRow).html("<a class='commentcount' href='/tickets/detail/" + aData[2] + "#attachments'><img style='cursor: pointer;' title='attachement' class='inject icon-comment' src ='/Assets/Extranet/Images/icon-attachment.svg' alt='attachement'></a>")) to generate svg tag instead of img tag.