@DeniSidorenko

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

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


Как обрезать таким образом что бы иметь лишь часть что на рисунке
5HF32l_m-Y8.jpg

При этом - красный цвет что бы был прозрачным а прозрачный( белый что на фото) был белым
Пробовал в фотошопе обрезать и через заливку но остается порванные части
3Ii7yqtqGWg.jpg
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 2
@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
Ответ написан
warsand
@warsand
Экспериментатор
- Ну вот, кажется заработало... (вместе с картинкой)))
Шаблон - здесь
<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>

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

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

Войти через центр авторизации
Похожие вопросы