Блог

Привет, я успешно обрезал путь к форме svg и сделал ее масштабируемой, используя документы, которые я нашел в Интернете.

Однако я пытаюсь добавить границу к пути клипа, но безуспешно. Я не хочу накладывать этот клип и добавлять отступы, так как мне нужна прозрачность.

Вот код, который я использовал, и эффект, который я пытаюсь воссоздать, прикреплен к изображению.

Заранее спасибо!

 lt;svg   height="0"   width="0"  viewBox="0 0 198.6 51.6"  xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"gt;  lt;g id="Assets" fill="none"gt;  lt;defsgt;  lt;clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00503524672 , 0.01937984496)"gt;  lt;path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2  c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"gt;lt;/pathgt;  lt;/clipPathgt;  lt;/defsgt;  lt;/ggt; lt;/svggt;  lt;stylegt;  .btn_b {  -webkit-clip-path: url(#myClip);  clip-path: url(#myClip);  } lt;/stylegt;  

пример кнопки

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

Вот простой пример, где черная часть является просто меньшим псевдо-элементом после, но обрезана так же, как фон, предоставленный псевдо-элементом до.

 .btn_b {  -webkit-clip-path: url(#myClip);  clip-path: url(#myClip);  width: 40vmin;  height: 20vmin;  background-color: transparent;  position: relative;  border: none; }  button::before, button::after {  content: '';  position: absolute;  z-index: -1; }  button::before {  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: linear-gradient(to right, cyan, magenta); }  button::after {  top: 1vmin;  left: 1vmin;  width: calc(100% - 2vmin);  height: calc(100% - 2vmin);  background-color: black;  -webkit-clip-path: url(#myClip);  clip-path: url(#myClip); } 

 lt;button class="btn_b"gt;lt;/buttongt; lt;svg height="0" width="0" viewBox="0 0 198.6 51.6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"gt;  lt;g id="Assets" fill="none"gt;  lt;defsgt;  lt;clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00503524672 , 0.01937984496)"gt;  lt;path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2  c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"gt;lt;/pathgt;  lt;/clipPathgt;  lt;/defsgt;  lt;/ggt; lt;/svggt;