SVG Text with Shadow in Internet Explorer

Question

Here is an example of a simple SVG with a Text Element. For readability I would like to have a shadow arround the text. I have implemented such a solution using CSS: text-shadow.

Here is the text-Element:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version = "1.1" width= "100" height= "100">
   		<g>
   			<rect x="0" y="0" width="100" height="100" fill="gray"/>
    		<circle cx="50" cy="50" r="5"/>
    		<text x="50" y="40" style="text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">Text</text>
    	</g>
</svg>

JSFiddle with SVG

This works in Chrome and Firefox. But the shadow is not visible in IE. As far as I know, IE supports text-shadow, but not in SVG. Is there an alternative solution, to get a similar effect? Starting from IE 9 would be great, but if it is only 10 or 11 that would be good too.

Edit: I am looking for a SVG solution. The SVG is used as part of a map, and therefore is panned and zoomed. So a solution using HTML elements is not really useful.

Answer 1

You can replace a single CSS text-shadow with an equivalent SVG filter of the form...

<filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

Just fill in the radius, offset-x, offset-y, and color values.

Your CSS example combined four offset non-blur shadows. An equivalent SVG filter might look something like...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version = "1.1" width= "100" height= "100">
    <defs>
        <filter id="dropShadow">
            <feFlood flood-color="white" result="flood"/>
            <feOffset dx="-1" dy="0" in="SourceAlpha" result="offset1"/>
            <feComposite operator="in" in="flood" in2="offset1" result="shadow1"/>
            <feOffset dx="0" dy="1" in="SourceAlpha" result="offset2"/>
            <feComposite operator="in" in="flood" in2="offset2" result="shadow2"/>
            <feOffset dx="1" dy="0" in="SourceAlpha" result="offset3"/>
            <feComposite operator="in" in="flood" in2="offset3" result="shadow3"/>
            <feOffset dx="0" dy="-1" in="SourceAlpha" result="offset4"/>
            <feComposite operator="in" in="flood" in2="offset4" result="shadow4"/>
            <feMerge>
                <feMergeNode in="shadow1"/>
                <feMergeNode in="shadow2"/>
                <feMergeNode in="shadow3"/>
                <feMergeNode in="shadow4"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <g>
        <rect x="0" y="0" width="100" height="100" fill="gray"/>
        <circle cx="50" cy="50" r="5"/>
        <text x="50" y="40" filter="url(#dropShadow)">Text</text>
    </g>
</svg>

Answer 2

You can remove the text element from the svg and put it into a DOM text element (such as a paragraph tag) and apply the styles to that; something like this:

<div class="svg-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version = "1.1" width= "100" height= "100">
    <g>
        <rect x="0" y="0" width="100" height="100" fill="gray"/>
        <circle cx="50" cy="50" r="5"/>
    </g>
  </svg>
  <p class="shadow">
  Text
  </p>
</div>

and css:

.svg-wrap {
  position: relative;
}
.shadow {
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  position: absolute;
  top: 10px;
  left: 50px;
}

And here it is working: http://jsfiddle.net/Lyd69gr7/