I have the following SVG,created in Inkscape (plain SVG) which I've tidied up in VS Code. I have saved it and tried to revert in Inscape and open with Firefox (both up-to-date versions) but in both cases, the text doesn't render. In Inkscape, the text is only apparent via selection and the selection is a zero height dashed line, but in firefox, the text is selectable and shows the highlighting inverse colour but again, no text shows. I've read through a few times and can't see a problem, but clearly there is one...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<style>
.timestamp {
font: bold 24px sans-serif;
fill: black;
}
</style>
<defs
id="defs1">
<radialGradient
id="pillGradient"
cx="29.671396"
cy="44.50275"
fx="29.671396"
fy="44.50275"
r="3.9697015"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.6777305,0.01756636,-0.01425945,1.3614585,-19.408916,57.54193)" />
<path
id="slideLine"
d="M 25,120 h 180"
style="fill:none;stroke:#d8d8d8;stroke-width:1.99999;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
<path
id="leadLine"
d="M 25, 115 v -10 h 0 v -10"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
<circle
id="pill"
cx="25"
cy="120"
r="3"
style="fill:#0096a2;fill-opacity:1;stroke:url(#pillGradient);stroke-width:1;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
<text
xml:space="preserve"
class="timestamp"
x="27"
y="95"
id="timeVal">
</text>
</defs>
<g
id="dateRangeCtl">
<use
href="#slideLine"
id="slider" />
<use
href="#pill"
id="leftPill" />
<use
href="#pill"
id="rightPill"
x="100" />
<use
href="#leadLine"
id="leftLeadLine" />
<use
href="#timeVal"
id="startTime"
class="timestamp">Start</text>
<use
href="#leadLine"
id="rightLeadLine"
x="100" />
<use
href="#timeVal"
id="endTime"
class="timestamp"
x="100">End</text>
</g>
</svg>
<html>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<style>
.timestamp {
font: bold 24px sans-serif;
fill: black;
}
</style>
<defs
id="defs1">
<radialGradient
id="pillGradient"
cx="29.671396"
cy="44.50275"
fx="29.671396"
fy="44.50275"
r="3.9697015"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.6777305,0.01756636,-0.01425945,1.3614585,-19.408916,57.54193)" />
<path
id="slideLine"
d="M 25,120 h 180"
style="fill:none;stroke:#d8d8d8;stroke-width:1.99999;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
<path
id="leadLine"
d="M 25, 115 v -10 h 0 v -10"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
<circle
id="pill"
cx="25"
cy="120"
r="3"
style="fill:#0096a2;fill-opacity:1;stroke:url(#pillGradient);stroke-width:1;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1" />
</defs>
<g
id="dateRangeCtl">
<use
href="#slideLine"
id="slider" />
<use
href="#pill"
id="leftPill" />
<use
href="#pill"
id="rightPill"
x="100" />
<use
href="#leadLine"
id="leftLeadLine" />
<text
class="timestamp"
x="27"
y="95"
id="startTime">
Start
</text>
<use
href="#leadLine"
id="rightLeadLine"
x="100" />
<text
class="timestamp"
x="127"
y="95"
id="endTime">
End
</text>
</g>
</svg>
</body>
</html>Instead of placing the text element inside defs and referencing it using use element, I’ve directly added separate text elements for the "Start" and "End" labels.