SVG text with rounded stroke

[andabil]

Hi, I would like to know how make a rounded stroke on text.

This is the desired output.

The is the generated output.

Here is the HTML and CSS that I used.

<div class="">
  <div class="price">
     <svg>
	<text y="55" x="20">$135.00</text>
     </svg>
     <div class="overlay">
	$135.00
     </div>
  </div>
</div>

svg {
   font: bold 60px 'Galano Grotesque Alt'
}
text {
  stroke: red;
  stroke-width: 12px;
  fill: white;
}
.overlay{
  color: white;
  font: bold 60px 'Galano Grotesque Alt';
  position: absolute;
  top: 3px;
  left: 28px;
}

[petgus]

As I recall TuesPechkin uses the QT Web Browser (I do not know which version) to render your markup.
So I suggest you install that browser and try to work it out that way by fiddling in Web Inspector (Enable it under Tools > Enable Web Inspector ) that is available in the QT Web Browser.

Download QT Web Browser
http://www.qtweb.net/download.html

[andabil]

thank you petgus. I could see the same output from this browser. This will help a lot.

[andabil]

Still have no luck. I tried this HTML and CSS but same result in PDF file, no rounded corner on texts

CSS

.redstroke {
	font: bold 60px 'Galano Grotesque Alt';				
	-webkit-text-stroke: 15px #E51A2C;
	-webkit-text-fill-color: white;
}

HTML

<div class="redstroke">
	<span>$135.00</span>
</div>