Как обрезать SVG?

Question

[DeniSidorenko]

Привет, есть такой файл svg
CodePen
Так он выглядит в браузере

Вид в браузере

Как обрезать таким образом что бы иметь лишь часть что на рисунке


При этом - красный цвет что бы был прозрачным а прозрачный( белый что на фото) был белым
Пробовал в фотошопе обрезать и через заливку но остается порванные части

Answer 1

[lagudal]

Пробовал в фотошопе обрезать и через заливку но остается порванные части

кто же вектор в фотошопе редактирует? Берите любой векторный редактор и обрезайте, как душе угодно,
например, близко к вашему, код

<svg
xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<path fill="#CA0303" d="M0,0v57.158c0,0,496.366-70.005,964,44c443,108,956-44,956-44V0H0z"/>
</svg>

По заливкам - можно или в коде выставить fill="none", либо к пути добавить класс или id, и в css этому элементу прописать хоть fill:none хоть opacity:0

Comments

[DeniSidorenko]

Спасибо большое, но как у вас получилось так обрезать?))

[Варлам Ерофеич]

А можно и так:

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<path fill-rule="evenodd"  fill="rgb(202, 3, 3)"
 d="M0,0
    L1600,0 
    L1600,100
    C1600,100 1200,250 800,100 
    C300,-80 0,120 0,120 
    L0,0 Z"/>
</svg>

[lagudal]

DeniSidorenko,
я лично работаю в иллюстраторе, но это элементарная операция для любого редактора векторной графики, их масса, как десктопных, так и онлайн.
Вам нужно освоить хотя бы азы работы с вектором, иначе с svg работать не получится.

[DeniSidorenko]

lagudal, inskape думаю подойдет...

[Максим]

DeniSidorenko, научился ?

[DeniSidorenko]

Максим Ленский, Скачал inskape а как обрезать как у чувака хз) инструкции нет, методом тыка пробую

[Максим]

DeniSidorenko, ладно я отдохнул - я могу показать как делать это но не буду отрезать ни чего а просто сделаю готовый слайд ... хочешь ??

[DeniSidorenko]

Максим Ленский, Да, правда я не понял что ты имеешь ввиду но любая помощь будет кстати, с утра разбираюсь. Уже просто секции вставляю как обычный фон уже обрезанный

[Максим]

DeniSidorenko, ну ты же хотел - отрезать нижнюю часть .... а я хочу показать как сделать что бы всё изображение стало такой формы ... и ни чего не надо отрезать ... в общем если надо то скачай тем вивер и пиши [e-mail] пароль и id ...я зайду к тебе и покажу что и как делать ...

[lagudal]

DeniSidorenko,
инструкций хоть ж..й жуй, в том числе по inkscape

Даже с кино - тыц

Answer 2

[Варлам Ерофеич]

- Ну вот, кажется заработало... (вместе с картинкой)))
Шаблон - здесь

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<pattern id="pattern"
   width="100%" height="100%">
   <image xlink:href="http://wallpapers-image.ru/1280x720/flowers/wallpapers-1280x720/zastavki-khrizantema-cvety-1280x720.jpg" width="100%" />
</pattern>
<path fill-rule="evenodd"  fill="url(#pattern)"
 d="M 0 200 
    Q 300 50 600 200 
    Q 900 350 1200 200 
    L 1200 50 L 0 50 Z"/>
</svg>