Мне нужно перевернуть SVG по горизонтали - ничего не могу найти в Интернете. Вот:

<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M 0,100 C 40,0 60,0 100,100 Z"/>
    </svg>

Любая помощь приветствуется, ура!

21
Alex 24 Апр 2017 в 19:09

2 ответа

Лучший ответ

Вы можете просто установить преобразование, чтобы перевернуть вещи и затем переместить форму (поскольку это перевернуло о происхождении).

<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
22
Lee Taylor 8 Май 2020 в 23:04

Если вы можете использовать CSS (это не работает при импорте в Inkscape на сегодняшний день), вы также можете использовать масштабное преобразование CSS, которое имеет преимущество в том, что оно по умолчанию основано на центре элемента: transform: scale(-1,1);

<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
13
linuxdan 5 Фев 2019 в 20:49