СSS маскирование через svg маску

Question

СSS маскирование через svg маску

Рейтинг: 0Ответов: 0Опубликовано: 16.02.2023

Подскажите, пожалуйста, что не так делаю с svg маской что оно не дает результат такой как на картинке ?

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.hero_item {
  position: relative;
}

.hero_picture {
  position: relative;
  padding: 12px;
  max-height: 420px;
  overflow: hidden;
}

.hero_name {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #FFF;
}

.hero_position {
  margin-top: 8px;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  color: #FFF;
}

.hero_picture img {
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

<svg width="0" height="0" viewBox="0 0 276 381" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <mask id="mask"  x="0" y="0" width="276" height="381">
                        <path d="M275.056 15.2578C275.056 6.97355 268.34 0.257812 260.056 0.257812H151.467L138.001 23.5179L124.534 0.257812H15.9455C7.66124 0.257812 0.945496 6.97354 0.945496 15.2578V177.183L24.2698 190.612L0.945496 204.042V365.967C0.945496 374.251 7.66122 380.967 15.9455 380.967H124.534L138.001 357.707L151.467 380.967H260.056C268.34 380.967 275.056 374.251 275.056 365.967V204.042L251.731 190.612L275.056 177.183V15.2578Z" fill="white"/>
                    </mask>
                </defs>
            </svg>


<div class="hero_item">
  <div class="hero_picture" style="background: linear-gradient( #FFDD22 50%, #383030 51%)">
    <img width="276" height="381" src="https://i.ibb.co/frKL9TM/1.jpg" alt="1">
  </div>
  <a class="hero_name" href="#">John Doe</a>
  <p class="hero_position">Managing Partner</p>
</div>

Не могу понять, что не так с маской. Делал по примеру из этого описания. Вот то что из Figma удалось забрать

<svg width="276" height="381" viewBox="0 0 276 381" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<mask id="mask0_85_1033" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="276" height="381">
<path d="M275.056 15.2578C275.056 6.97355 268.34 0.257812 260.056 0.257812H151.467L138 23.5179L124.534 0.257812H15.9455C7.66121 0.257812 0.945465 6.97354 0.945465 15.2578V177.183L24.2697 190.612L0.945465 204.042V365.967C0.945465 374.251 7.66119 380.967 15.9455 380.967H124.534L138 357.707L151.467 380.967H260.056C268.34 380.967 275.056 374.251 275.056 365.967V204.042L251.731 190.612L275.056 177.183V15.2578Z" fill="white"/>
</mask>
<g mask="url(#mask0_85_1033)">
<rect x="-4.03821" y="-24.5898" width="284.078" height="428.422" fill="url(#pattern0)"/>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_85_1033" transform="matrix(0.00150812 0 0 0.001 -0.254058 0)"/>
</pattern>
</defs>
</svg>

css svg маска css-mask

Источник: Stack Overflow на русском

СSS маскирование через svg маску

Ответы