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 用作地图的一部分，因此可以进行平移和缩放。所以使用 HTML 元素的解决方案并不是很有用。

Answer 1

您可以从 svg 中删除文本元素并将其放入 DOM 文本元素（例如段落标记）并对其应用样式；像这样：

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

和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;
}

它正在运行：http://jsfiddle.net/Lyd69gr7/

Answer 2

您可以将单个 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>

Internet Explorer 中带阴影的 SVG 文本

SVG Text with Shadow in Internet Explorer

html

css

internet-explorer

svg

svg-filters