Support setting the background colour of the text

[bramp]

SVG sadly doesn't allow setting the background of text, instead you must create a rect behind the text. This is problematic if the font is chosen at run time, as there is no way at generation time to measure the width/height of the text.

We could hack some emscript that runs inside the SVG to keep the background rect in the right place.

other suggestions welcome

[davidje13]

I've just faced this and solved it using a filter. It's not perfect (not a square highlight but blobby), and makes the highlighted text appear low-res when printed from Chrome & Safari, but it does the job and doesn't need any scripts:

<filter id="highlight">
  <!-- 1: dilate the text shape -->
  <feMorphology in="SourceAlpha" operator="dilate" radius="4"></feMorphology>

  <!-- 2: blur and threshold to make a smoother highlight -->
  <feGaussianBlur edgeMode="none" stdDeviation="3, 1.5"></feGaussianBlur>
  <feComponentTransfer>
    <feFuncA intercept="-70" slope="100" type="linear"></feFuncA>
  </feComponentTransfer>

  <!-- 3: colour it in -->
  <feComponentTransfer>
    <feFuncR intercept="1" slope="0" type="linear"></feFuncR>
    <feFuncG intercept="0.9375" slope="0" type="linear"></feFuncG>
    <feFuncB intercept="0.09375" slope="0" type="linear"></feFuncB>
    <feFuncA slope="0.7" type="linear"></feFuncA>
  </feComponentTransfer>

  <!-- 4: overlay the original text -->
  <feMerge>
    <feMergeNode></feMergeNode>
    <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
</filter>

The effect looks like this:

Sadly an incomplete spec means that the same method can't be used to create square highlights;

• https://bugs.chromium.org/p/chromium/issues/detail?id=603157
• https://bugzilla.mozilla.org/show_bug.cgi?id=917766

[Bobrovskih]

Hello, i have problem text overlap

my solution its create text element twice
https://gist.github.com/Bobrovskih/fa6cc280f11d54b329edff47f7193448#file-js-sequence-diagrams-js-L1216
to first text element add class e.g.: text-bg
in application add css styles

text.text-bg {
  stroke: white;
  stroke-width: 0.4rem;
  stroke-linejoin: round;
}

look like this