在Internet Explorer中帶有陰影的SVG文本

以下是帶有文本元素的簡單SVG示例。爲了便於閱讀，我希望在文字周圍留下陰影。我已經使用CSS實現了這種解決方案：text-shadow。在Internet Explorer中帶有陰影的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"> 
 
    \t \t <g> 
 
    \t \t \t <rect x="0" y="0" width="100" height="100" fill="gray"/> 
 
    \t \t <circle cx="50" cy="50" r="5"/> 
 
    \t \t <text x="50" y="40" style="text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">Text</text> 
 
    \t </g> 
 
</svg>

JSFiddle with SVG

這個工程在Chrome和Firefox瀏覽器。但是這個影子在IE中是不可見的。據我所知，IE支持文本陰影，但不支持SVG。有沒有其他解決方案，以獲得類似的效果？從IE 9開始會很棒，但是如果只有10或11，那也不錯。

編輯：我正在尋找一個SVG解決方案。 SVG被用作地圖的一部分，因此被平移和縮放。所以使用HTML元素的解決方案並不是很有用。

來源

2015-12-11 Alig

您可以用表格的等效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>

來源

2015-12-11 21:09:26

謝謝。此解決方案適用於IE10及更高版本。這一刻應該沒問題。 – Alig

您可以從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/

來源

2015-12-11 15:46:49 SheedySheedySheedy

謝謝。這將是一個有效的解決方案。因爲我在SVG中有很多這樣的文本元素具有不同的位置，所以會有點痛苦。另一方面，我可以擁有內聯風格的職位，所以應該沒問題。 – Alig

在Internet Explorer中帶有陰影的SVG文本

回答

相關問題