Маска-порекло - ЦСС-трикови

mask-originНаводи маска позиције подручје слике маска слоја. Другим речима, дефинише где је порекло слике слоја маске, било да је то ивица обруба, облога или оквир са садржајем.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

За елементе који се приказују као један оквир, mask-originодређује подручје позиционирања маске. За елементе који се приказују као вишеструки оквири (нпр. Редови у више редова, оквири на неколико страница) својство одређује на којим оквирима box-decoration-breakсе одређује подручје позиционирања маске.

Ово својство ради попут background-originсвојства, осим што има различиту почетну вредност и три додатне вредности које се примењују на СВГ елементе.

У следећој демонстрацији можете променити порекло слике слоја маске. Испод је иста слика која показује ефекат бољег маскирања и обележавања ивица и облога:

Синтакса

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Почетна вредност: border-box
Односи се на: Сви елементи. У СВГ-у се односи на елементе контејнера искључујући елемент, све графичке елементе и елемент.
Наследио: не
Тип анимације: дискретна

Вредности

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Дефиниције вредности

content-box: Положај је у односу на оквир са садржајем. Порекло се mask-imageналази у горњем левом углу ивице садржаја.
padding-box: Положај је у односу на оквир за попуњавање. Поријекло слике маске 0 0позиционирано је у горњем левом углу ивице облоге, а 100% 100%то је доњи десни угао.
border-box: Подразумевана вредност, која поставља положај у односу на оквир ивице.
margin-box: Положај је у односу на оквир маргине
fill-box: Положај је у односу на оквир за ограничавање предмета
stroke-box: Положај је у односу на оквир за ограничавање потеза
view-box: Користи најближи приказ СВГ-а као референтни оквир. Ако је viewBoxатрибут наведен за СВГ елемент за креирање оквира за приказ, референтни оквир се поставља на исходиште координатног система успостављеног viewBoxатрибутом, а димензија референтног оквира поставља се на вредности widthи heightвредности viewBoxатрибута.
initial: Примењује подразумевану поставку својства, која јеborder-box
inherit: Усваја mask-originвредност родитеља.
unset: Уклања струју mask-originиз елемента.

Коришћење више вредности

Ово својство може узети листу вредности раздвојених зарезом за порекло маске, где се свака вредност примењује на одговарајућу слику слоја маске наведена у mask-imageсвојству. У следећем примеру прва вредност наводи порекло прве слике, друга вредност наводи порекло друге слике итд.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Напомене

За СВГ елемената без повезаног оквира ЦСС Лаиоут, вредности content-box, padding-boxи border-boxизрачунава на fill-box.
За елементе са прозора повезани ЦСС лаиоут, вредности fill-box, stroke-boxи view-boxизрачунава до initialвредности mask-originкоја је border-box.

Демо

Када се слика слоја маске понови, прва инстанца се позиционира у горњем левом углу наведеног подручја позиционирања, а затим се понавља, почев од тамо, према вредности mask-repeatсвојства.

Промените вредност за mask-originу следећој демонстрацији да бисте стекли бољу представу о томе шта се догађа: