У меня есть несколько диаграмм SVG, сгенерированных из Adobe Illustrator, которые были оптимизированы для использования в Интернете и соответствия доступности. Я замечаю, что текстовые потомки появляются вверху изображения. Эти артефакты не должны появляться вообще.
Снимок экрана Chrome Визуализация браузера
Раздетый код
<figure>
<figcaption>A barchart comparison</figcaption>
<svg id="bar-chart-current-year" role="group" aria-labelledby="graph-title" aria-describedby="graph-description" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 799.2 598.59">
<defs>
<style>
.cls-1,
.cls-2,
.cls-7 {
fill: none;
}
.cls-1,
.cls-2 {
stroke: #d8d8d8;
}
.cls-1,
.cls-7 {
stroke-linejoin: round;
}
.cls-2 {
stroke-miterlimit: 10;
}
.cls-3,
.cls-8 {
opacity: 0.5;
}
.cls-3,
.cls-6,
.cls-9 {
font-size: 1.75rem; /* 28px */
font-family: ArialMT, Arial;
}
.cls-4 {
fill: #00654e;
}
.cls-5 {
fill: #94d500;
}
.cls-7 {
stroke: #37474f;
stroke-width: 2px;
}
.cls-10 {
opacity: 0.7;
}
</style>
</defs>
<title id="graph-title">Bar Chart Comparison</title>
<desc id="graph-description">A bar graph of the last 5 years ...</desc>
<text id="screenreader-title">Bar Chart Comparison - A bar graph of the last 5 years ...</text>
<g id="bar-chart" data-name="bar-chart">
<path id="gridlines" class="cls-1" d="M1.81,1H799.67M1.81,165.46H799.67M1.81,329.91H799.67" transform="translate(-0.47 -0.5)" />
<g id="annotation">
...
</g>
<g id="bar-graphics">
...
</g>
<g id="bar-graphic-labels" class="cls-10">
...
</g>
<line id="baseline" class="cls-7" x1="0.53" y1="491.64" x2="798.06" y2="491.64" />
<g id="y-axis" class="cls-8">
...
</g>
<g id="x-axis" class="cls-10">
...
</g>
</g>
</svg>
</figure>
Я подозреваю, что в коде есть что-то с тегами title, description и screenreader-title.