SVG1 css styling

by toubia95

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@latest/dist/path-data-polyfill.min.js"></script>
<!-- SVG 1.1 & SVG 1.2 Tiny-->
<svg id="block" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <text x="1" y="2">
    <tspan x="10" dy="150">text</tspan>
  </text>
</svg>

CSS

svg text tspan {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 200px;
  fill: red;
  stroke: black;
  stroke-width: 2px;
  opacity: 0.8;
  text-decoration: underline;
  text-transform: capitalize;
  text-shadow: #FC0 1px 0 10px;
  letter-spacing: 2px;
  word-spacing: 4px;
  filter: blur(1px);
  pointer-events: none;
}