Internet Explorer中带有阴影的SVG文本

Question

这是一个带有文本元素的简单SVG的示例.为了便于阅读,我希望文本周围有一个阴影.我使用CSS实现了这样的解决方案:text-shadow.

这是文本元素:

<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与SVG

这适用于Chrome和Firefox.但影子在IE中不可见.据我所知,IE支持文本阴影,但不支持SVG.是否有替代解决方案,以获得类似的效果？从IE 9开始会很棒,但如果它只有10或11也会很好.

编辑:我正在寻找一个SVG解决方案.SVG用作地图的一部分,因此进行平移和缩放.因此,使用HTML元素的解决方案并不是很有用.

Answer 1

您可以使用表单的等效SVG过滤器替换单个CSS文本阴影...

<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>

只需填写半径,offset-x,offset-y和颜色值即可.

您的CSS示例组合了四个偏移非模糊阴影.等效的SVG过滤器可能看起来像......

<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>