Open bramp opened 7 years ago
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;
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
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