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

Question

DeniSidorenko @DeniSidorenko

SVG

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

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

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

aySgsBkxzzTeDbidubM_9kkm1P-WPvG8w8w0uXcf

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

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

Вопрос задан более трёх лет назад
3831 просмотр

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 2

10 комментариев

DeniSidorenko @DeniSidorenko Автор вопроса

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

Написано более трёх лет назад

Варлам Ерофеич @warsand

А можно и так:

<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 @lagudal

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

Написано более трёх лет назад
DeniSidorenko @DeniSidorenko Автор вопроса

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

Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG

DeniSidorenko, научился ?

Написано более трёх лет назад
DeniSidorenko @DeniSidorenko Автор вопроса

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

Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG

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

Написано более трёх лет назад
DeniSidorenko @DeniSidorenko Автор вопроса

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

Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG

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

Написано более трёх лет назад
lagudal @lagudal

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

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

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

+1 ещё

Средний
Как изменить цвет у сложных спрайтовых иконок в отдельном файле?
- 2 подписчика
- 10 апр.
- 106 просмотров
1

ответ
Adobe Photoshop

+1 ещё

Простой
Почему svg теряет качество при масштабировании?
- 1 подписчик
- 08 апр.
- 131 просмотр
1

ответ
CSS

+1 ещё

Простой
Не работает анимация градиента в svg в Safari. В чем ошибка в коде?
- 1 подписчик
- 26 февр.
- 94 просмотра
0

ответов
PHP

+2 ещё

Простой
Почему возникает ошибка при конвертации SVG в JPG?
- 1 подписчик
- 30 янв.
- 107 просмотров
1

ответ
HTML

+1 ещё

Средний
Обработка тайлов на SVG. Видны прорези между ними, что делать?
- 1 подписчик
- 29 янв.
- 185 просмотров
1

ответ
SVG

+2 ещё

Сложный
Как вытащить анимацию из Figma (прототип) для внедрения на сайт?
- 1 подписчик
- 25 янв.
- 180 просмотров
0

ответов
CSS

+1 ещё

Простой
Как сделать alternate анимацию в svg?
- 1 подписчик
- 18 янв.
- 36 просмотров
1

ответ
HTML

+2 ещё

Сложный
Как распределить элементы на адаптивной, векторной кривой?
- 1 подписчик
- 09 янв.
- 91 просмотр
1

ответ
CSS

+1 ещё

Простой
Как изменить цвет svg заливки?
- 2 подписчика
- 08 янв.
- 152 просмотра
2

ответа
HTML

+3 ещё

Простой
Можно ли svg спрайт вставлять в псевдоэлементы?
- 1 подписчик
- 02 янв.
- 89 просмотров
1

ответ
Показать ещё Загружается…

Программист 1С

Виктория • Москва

от 300 000 ₽

C# разработчик

САТЕЛ

от 120 000 до 200 000 ₽

Программист 1С

ДАЛКОС • Москва

от 250 000 ₽

Софт на js

19 апр. 2024, в 13:31

10000 руб./за проект

Разработка Pwa сайта

19 апр. 2024, в 13:12

35000 руб./за проект

Доработать вебпроект со стеком: yii2, jquery, vue

19 апр. 2024, в 13:06

6000 руб./за проект

Answer 1 · 2018-12-17 15:13:21

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

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

<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

Answer 2 · 2018-12-17 16:58:00

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

<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>

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт