html - 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 with SVG

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

编辑:我正在寻找 SVG 解决方案。 SVG 用作 map 的一部分，因此可以进行平移和缩放。因此，使用 HTML 元素的解决方案并不是很有用。

Answer 1

您可以将单个 CSS 文本阴影替换为等效的 SVG 过滤器，格式为...

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

只需填写半径、偏移-x、偏移-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>