CSS SVG文本阴影位于文本之上

Question

我只是想在一些文字后面留下一个阴影，但阴影似乎显示在文本的顶部。我使用谷歌浏览器。这是一张图片：

在这里，它在您的浏览器中呈现：

＆＃13;

＆＃13;

#title {
  fill: white;
  color: white;
  display: block;
  margin: auto;
  text-shadow: 10px 10px 3px black;
  font-size: 400%;
  text-align: center;
  font-family: consolas;
  font-weight: bold;
  stroke: #F08000;
  stroke-width: 1px;
}

＆＃13;

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;">
   <text id="title" text-anchor="middle" x="50%" y="20vh">Software</text>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

减少水平和垂直阴影并增加text-shadow属性中的模糊半径：

authorize

以下是工作样本：Check Me!

我希望这就是你要找的东西。

Answer 2

我相信正在发生的事情是，由于某种原因，笔划的阴影被应用在填充颜色的顶部（我不确定为什么会像那样分层，但似乎是这种情况）。一种解决方法是创建两个<text>元素，一个用于制作阴影，另一个用于制作阴影。

HTML：

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;">
   <text id="titleshadow" text-anchor="middle" x="50%" y="20vh">Software</text>
   <text id="titletop" text-anchor="middle" x="50%" y="20vh">Software</text>
</svg>

CSS：

text {
   display: block;
   margin: auto;
   font-size: 400%;
   text-align: center;
   font-family: consolas;
   font-weight: bold;
}
#titleshadow {
   text-shadow: 10px 10px 3px black;
}
#titletop {  
   stroke: #F08000;
   stroke-width: 1px;
   fill: #fff;
}

小提琴：https://jsfiddle.net/wquzq9z4/