Tiny MCE editor stripping xlink:href parameter from SVG USE tag

Question

I have an inline SVG tag with an embedded <USE> tag.

HTML:

<ul>
   <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> My Account</li>
</ul>

I have created a filter function to force the Tiny MCE editor to leave SVG tags alone. The code was adapted from post: use of <svg> tag into wordpress.

Filter function:

add_filter( 'tiny_mce_before_init', 'fb_tinymce_add_pre' );
function fb_tinymce_add_pre( $initArray ) {

   // Command separated string of extended elements
   $ext = 'svg[preserveAspectRatio|class|style|version|viewbox|xmlns],defs,use[xlink:href|x|y],linearGradient[id|x1|y1|z1]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    }
    // maybe; set tiny paramter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;
}

I adapted the posted solution to add SVG CLASS, the USE tag and its XLINK:HREF, X and Y parameters.

Problem is the xlink:href parameter is being miss-interpreted resulting in code butchery upon switching to VISUAL mode in the editor.

HTML before switch to visual mode:

     <svg class="icon-user"><use xlink:href="#icon-user"></use></svg>

HTML after switch to visual mode:

     <svg class="icon-user"><use xlink="href"></use></svg>

I have tried escaping the colon in the xlink:href function parameter like this: xlink\:href, tried an encoded value for the colon like this: xlink%3Ahref and using quotes around it like this "xlink:href" but all failed.

I know you can embed svg using HTML5 markup, but I would like to try this method if I can get a solution that sticks.

Answer 1

Unfortunately the colon is a TinyMCE control character

Forces the attribute to the specified value. For example, 'border:0'

...hence the switch to xlink=href. The only apparent solution is the wildcard use[*]

Use the control character ? which "separates attribute verification values" i.e. use[xlink?href]

Answer 2

You can used js for added in the beginning of the line

$(document).ready(function () {
    $("li").prepend('<svg class="icon-user"><use xlink:href="#icon-user"></use></svg>');
});

Or assign a class to the li tag