Highlighted text using SVG

HTML & CSS
1

I try set a demo using SVG and highlighted text. Do you know what is wrong to manage SVG effect?

Source: http://www.coding-dude.com/wp/css/highlight-text-css/

<!DOCTYPE HTML>

<html>

<head>
<title>Colored text</title>
<link rel="stylesheet" type="text/css" href="css/styles_realistic_marker_highlight1.css">
</head>

<body>
<p>Realistic Marker <span class="realistic-marker-highlight">Highlight Text</span> Effect</p>

<svg xmlns="//www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;">
  <defs>
    <filter id="marker-shape">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>
</body>

</html>

and CSS:

.realistic-marker-highlight{
  position:relative;
}

.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  top:0.1em;
  padding:0 0.25em;
}
2

Do you know why above code does not work inside Mozilla browser?

3

The problem is the inline styling of display:none; in the svg.
(scroll to the right, it’s at the end of the opening svg tag)

<svg xmlns="//www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;">

It was working in Chrome, but not in Firefox as you noted.
I don’t have much experience with the filter property referring a url. My guess is that FF terminates any future reference to the svg since it was not rendered to the page due to display:none;.

To get it working in both browsers remove display:none; from the svg. Then with the class you already had set on the svg you can style it from the CSS to hide the svg off the page.

As seen here…


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.realistic-marker-highlight{
  position:relative;
}

.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  top:0.1em;
  padding:0 0.25em;
}
.svg-filters {
  position:absolute; /*remove from page flow*/
  top:-999em; /*and hide offscreen*/
}
</style>

</head>
<body>
<p>Realistic Marker <span class="realistic-marker-highlight">Highlight Text</span> Effect</p>

<svg class="svg-filters" xmlns="//www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="marker-shape">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

<p>sample text following svg element</p>
</body>
</html>
2 Likes
4

You are excellent developer. Thank you and it works.
I have seen it works inside Mozilla also without added class filter-svg.
Bootstrap V3 added

svg:not(:root) {
 overflow:hidden;
}
1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.