CSS SVG text-shadow is on top of text

Question

I am simply trying to put a shadow behind some text, but the shadow seems to be displayed on top of the text instead. I'm using Google Chrome. This is an image:

Here it is, rendered in your browser:

#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

Decrease horizontal and vertical shadows and increase blur radius in text-shadow property:

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

Here's the working sample: Check Me!

I hope this is what you are looking for.