Inline SVG?

[jonvitale]

Description

Would it be possible to support inline svg within the html of the Media Box? What is fantastic about this extension is the ability to use variables within the html, allowing text that is formatted according to user selections. I would also like to be able to do something similar with inline svgs. For example, coloring a circle based on some values.

Steps to Reproduce

1. I tried out this simple code, but in Chrome the svg does not appear:

=
'<div style="font-weight:bold;color: darkgreen;">
Hello, div below?
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<rect x="0" y="0" width="10" height="10" fill="red" /> 
</svg>
</div>'

Expected behavior

I should see a red rectangle.

Actual behavior

I see the words, "Hello, div below?" but a blank space below.
In Chrome dev tools, in the elements panel, I see the div, but a blank space where the svg should be.

Environment

Qlik Sense, September 2019 release.
Chrome 79.0.3945.130

Operating system

[x ] Windows
[ ] OSX
[ ] Linux

#### Qlik Sense

[ ] Desktop
[ x] Enterprise (Server)

#### Browser

[x ] Chrome
[ ] Firefox
[ ] Internet Explorer
[ ] Edge
[ ] Others: XXX

### Versions

* Extension version: [Version of the extension]
* Browser: 
* Qlik Sense Desktop: [Version of Qlik Sense Desktop]
* Qlik Sense Enterprise: [Version of Qlik Sense Enterprise]
* Operating system: 
* [Other relevant versions]

[jonvitale]

Hi Stefan,

I downloaded the latest version just to play with it in my desktop Qlik Sense.
Following what I saw here and here I was able to make the svg work.

I don't really want to set up the whole build environment to fork this and request a pull, so if you'd like to try this yourself you can do the following.

In lib/directives/qsMbHtml/qsMbHtml.js

controller: ['$scope', '$sce', function ( $scope, $sce ) {

          $scope.htmlTrusted = $sce.trustAsHtml($scope.htmlSource);

          $scope.setScrollingClass = function() {
           ....

and in lib/directives/qsMbHtml/qsMbHtml.html

<div class="qs-mb-html-container">
<div class="qs-mb-html-inner" ng-class="scrolling" ng-bind-html="htmlTrusted"></div>
</div>

Thanks, let me know if you think this is a good solution.

[jonvitale]

Not that I expect this to get integrated, but for completeness sake: to allow for dynamic changes to the displayed html based upon user selections, the trustAsHtml function needs to exist within a watcher for the htmlSource, so basically, in the controller:

$scope.$watch('htmlSource', function(newVal, oldVal){$scope.htmlTrusted = $sce.trustAsHtml(newVal)});