У меня есть SVG-диаграмма, которая состоит из множества <path> элементов, некоторые из которых перекрываются. У меня проблема в том, что там, где путь перекрывается, цвет первого элемента просвечивает, а второй меняет свой цвет. Я пытался использовать свойство stroke-opacity, но это не решает проблему. Затем я заметил, что, когда обводка больше 1px, верхний цвет отображается, как и ожидалось, но с полосами цвета по краям. Есть ли способ остановить это? Заранее спасибо.
<!DOCTYPE html>
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke-width="1">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 20 l215 0" />
</g>
<text x="0" y="12">1px stroke shows as brown rather than black</text>
<g fill="none" stroke-width="4">
<path stroke="red" d="M5 50 l215 0" />
<path stroke="black" d="M5 50 l215 0" />
</g>
<text x="0" y="40">Larger than 1px has overfringing</text>
</svg>
</body>
</html>
