Зеркальный SVG с использованием CSS имеет артефакт ⇐ CSS

[Anonymous]

Я использую Astro (для контекста), и у меня есть несколько разделителей в SVG на моей целевой странице
, чтобы они использовали для Exemple
class=`${hMirror? '-scale-x-100' : ''} ${vMirror? '-scale-y-100' : ''}`
< /code>
на теге SVG. < /p>
Это работает, но когда я использую vmirror, у меня есть артефакт (строка выше и под), иногда он исчезает, иногда это снова, то же самое, когда я изменяю размер окна. (Я подозреваю, что мой SVG может быть виновником): < /p>
---
import type { ThemeColors } from '@entities/ThemeColors';
import { nanoid } from 'nanoid';
interface Props {
previousColors: ThemeColors;
nextColors: ThemeColors;
hMirror?: boolean; // Optionnel, pour inverser horizontalement le SVG
vMirror?: boolean; // Optionnel, pour inverser verticalement le SVG
}

const { previousColors, nextColors, hMirror, vMirror } = Astro.props;
let gradientStart = `var(${previousColors.gradientStartCssVar})`;
let gradientEnd = `var(${previousColors.gradientEndCssVar})`;
let bgColor = nextColors.bgColor;
let previousColorsFill = previousColors.bgColorFill;
if (vMirror) {
gradientStart = `var(${nextColors.gradientStartCssVar})`;
gradientEnd = `var(${nextColors.gradientEndCssVar})`;
bgColor = previousColors.bgColor;
previousColorsFill = nextColors.bgColorFill;
}
const idLinearGradient = `shape-divider-${nanoid(6)}`; // Exemple : "shape-divider-k9b1xq"
const idRadialGradient = `shape-divider-${nanoid(6)}`; // Exemple : "shape-divider-k9b1xq"
---











d="M 234.4189,0 C 492.66627,20.501912 763.35431,38.280191 1000,94.130301 V 0 Z"
fill="url(#linearGradient4)"
opacity="0.5"
id="path2"
style=`fill:url(#${idRadialGradient})`>



< /code>
И здесь вы можете увидеть оба изображения, первые показывают SVG без vmirror, а второе - с vmirror


Могу я этого избежать?

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-artefact