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

Question

我只是想在一些文本后面放一个阴影,但阴影似乎显示在文本的顶部.我正在使用Google Chrome.这是一张图片:

在这里,它在您的浏览器中呈现:

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

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

Answer 1

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

text-shadow: 6px 6px 10px black;

这是工作样本:检查我!

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