SVG, how would I define text to apply to a Cylinder? - css

Question

I am attempting to apply text to a 3D image of a Cylinder using HTML and SVG. I can get the text to follow a textpath or calculate dx and dy for a textspan so that it follows the curve of an ellipse but the perspective is wrong. I have seen examples with the correct perspective but they were created using a drawing program like Corel Draw and I need this to work in a responsive Web site.
The textpath bends the text vertically so for example an L is just tilted at the outer edges of the cylinder where the vertical part of the L should stay parallel to the sides of the cylinder.
Using textspan with dx and dy attributes keeps the vertical part of an L vertical but the base does not follow the elliptical path.
The text I am writing to the cylinder is fairly limited so I could possibly pre-process it into a set of glyphs but there is too many possibilities to do this manually.
I appreciate any tips offered on how to make this look visually correct.
-- edited --
Based on the comments I now realize that even though I can fake a 3D image there is no z axis so to make this work correctly I might need to generate the graphic using something that supports 3D images. If I use something like that ideally it would allow for a responsive feel.
Here is an example:
https://jsfiddle.net/9bzaytnj/
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<ellipse cx="65" cy="50" rx="60" ry="15" id="lid"></ellipse>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgb(80,80,80)"></stop>
<stop offset="30%" stop-color="rgb(255,255,255)"></stop>
<stop offset="100%" stop-color="rgb(80,80,80)"></stop>
</linearGradient>
<ellipse cx="65" cy="70" rx="60" ry="15" id="bottom"></ellipse>
<rect x="5" y="50" width="120" height="20" id="face"></rect>
<clipPath id="clip" clipPathUnits="userSpaceOnUse">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bottom"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#face"></use>
</clipPath>
<path id="myTextPath" d="M5,62.5 a35,9 0 1,0 120,0"></path>
</defs>
<rect x="5" y="50" width="120" height="35" fill="url(#gradient)" clip-path="url(#clip)"></rect>
<use fill="grey" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lid"></use>
<text style="font-size:10">
<textPath anchor="middle" startoffset="20%" xlink:href="#myTextPath" >LX HHH LL HHH</textPath>
</text>
<path d="M5,70 a35,9 0 1,0 120,0" style="stroke:#660000; fill:none;"></path>
</svg>