#html #css #svg #frontend
Вопрос:
Мне нужно сделать вот так: 
У меня есть изображения, первое-это граница, второе-изображение с едой, и я должен их объединить, но я мог бы сделать только это: 
И я не должен использовать photoshop или что-то в этом роде, я должен создать что-то вроде трафарета для этого изображения.
Мой код на данный момент:
.mainImg {
width: 581px;
height: 366px;
.mainImgBorder {
position: absolute;
z-index: 1;
}
.img2 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
clip-path: url('../img/mainImgBorder.svg');
}
} <div class="mainImg">
<img src="img/mainImgBorder.svg" class="mainImgBorder" alt="">
<img src="img/img2.png" class="img2" alt="">
</div> Есть какие-нибудь идеи ??
Комментарии:
1. Возможно, вам потребуется использовать внутреннюю границу в качестве пути отсечения. Для получения дополнительной помощи вам необходимо отредактировать свой вопрос и добавить код для границы svg
2.
clip-pathНеобходимо указывать на путь, а не на весь SVG.. Например, попробуйтеmainImgBorder.svg#myInnerPathуказать, где myInnerPath-этоidпуть в вашем SVG. Обратите также внимание, что вы захотите, чтобы это был один путь, а не фигура, представляющая собой контур волнистой линии (как кажется на этот раз).3. Я не понимаю тебя, Пол
4. w3.org/Graphics/SVG/IG/resources/svgprimer.html#clipPath
5. Я пробовал, но это не работает
Ответ №1:
Вам нужно добавить position: relative и overflow: hidden в ваш содержащий div, и добавить width: 100% , чтобы все соответствовало.
.mainImg {
width: 581px;
height: 380px;
position: relative;
overflow: hidden;
}
.mainImgBorder {
position: absolute;
z-index: 1;
width: 100%;
height: auto;
}
.img2 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
clip-path: url('../img/mainImgBorder.svg');
width: 100%;
height: auto;
} <div class="mainImg">
<svg version="1.1" class="mainImgBorder" baseProfile="full" width="600" height="393" viewBox="0 0 600 393" xmlns="http://www.w3.org/2000/svg">
<path id="Background"
fill="#4b4c4f"
d="M 0 0 V 393 H 600 V 0 Z
M 27.00,69.00
C 27.00,61.00 33.00,55.00 41.00,55.00
41.00,55.00 41.00,41.00 41.00,41.00
41.00,41.00 55.00,41.00 55.00,41.00
55.00,33.00 61.00,27.00 69.00,27.00
69.00,27.00 531.00,27.00 531.00,27.00
539.00,27.00 545.00,34.01 545.00,41.00
545.00,41.00 559.00,41.00 559.00,41.00
559.00,41.00 559.00,47.82 559.00,55.00
567.00,55.00 573.00,61.00 573.00,69.00
573.00,69.00 573.00,324.00 573.00,324.00
573.00,332.00 567.00,338.00 559.00,338.00
559.00,338.00 559.00,352.00 559.00,352.00
559.00,352.00 545.00,352.00 545.00,352.00
545.00,360.00 539.00,366.00 531.00,366.00
531.00,366.00 69.00,366.00 69.00,366.00
61.00,366.00 55.00,360.00 55.00,352.00
55.00,352.00 41.00,352.00 41.00,352.00
41.00,352.00 41.00,338.00 41.00,338.00
33.00,338.00 27.00,332.00 27.00,324.00
27.00,324.00 27.00,69.00 27.00,69.00 Z" />
<path id="OuterBorder"
fill="none" stroke="#faae5d" stroke-width="5"
d="M 17.00,59.00
C 17.00,51.00 23.69,45.00 31.00,45.00
31.00,45.00 31.00,31.00 31.00,31.00
31.00,31.00 45.00,31.00 45.00,31.00
45.00,23.00 52.00,17.00 59.00,17.00
59.00,17.00 541.00,17.00 541.00,17.00
549.00,17.00 555.00,23.00 555.00,31.00
555.00,31.00 569.00,31.00 569.00,31.00
569.00,31.00 569.00,45.00 569.00,45.00
577.00,45.00 583.00,51.00 583.00,59.00
583.00,59.00 583.00,334.00 583.00,334.00
583.00,342.00 577.00,348.00 569.00,348.00
569.00,348.00 569.00,362.00 569.00,362.00
569.00,362.00 555.00,362.00 555.00,362.00
555.00,370.00 549.00,376.00 541.00,376.00
541.00,376.00 59.00,376.00 59.00,376.00
51.00,376.00 45.00,370.00 45.00,362.00
45.00,362.00 31.00,362.00 31.00,362.00
31.00,362.00 31.00,348.00 31.00,348.00
23.81,348.00 17.00,334.00 17.00,334.00
17.00,341.38 17.00,59.00 17.00,59.00 Z
M 51.00,17.00M 23.00,45.00" />
<path id="InnerBorder"
fill="none" stroke="#faae5d" stroke-width="3"
d="M 27.00,69.00
C 27.00,61.00 33.00,55.00 41.00,55.00
41.00,55.00 41.00,41.00 41.00,41.00
41.00,41.00 55.00,41.00 55.00,41.00
55.00,33.00 61.00,27.00 69.00,27.00
69.00,27.00 531.00,27.00 531.00,27.00
539.00,27.00 545.00,34.01 545.00,41.00
545.00,41.00 559.00,41.00 559.00,41.00
559.00,41.00 559.00,47.82 559.00,55.00
567.00,55.00 573.00,61.00 573.00,69.00
573.00,69.00 573.00,324.00 573.00,324.00
573.00,332.00 567.00,338.00 559.00,338.00
559.00,338.00 559.00,352.00 559.00,352.00
559.00,352.00 545.00,352.00 545.00,352.00
545.00,360.00 539.00,366.00 531.00,366.00
531.00,366.00 69.00,366.00 69.00,366.00
61.00,366.00 55.00,360.00 55.00,352.00
55.00,352.00 41.00,352.00 41.00,352.00
41.00,352.00 41.00,338.00 41.00,338.00
33.00,338.00 27.00,332.00 27.00,324.00
27.00,324.00 27.00,69.00 27.00,69.00 Z" />
</svg>
<img src="https://uploads-ssl.webflow.com/609817240e5a87efbb3458e0/609817240e5a873d7d345963_Gastronomy_Page@2x.jpg" class="img2" alt="">
</div>