Для каждого из четырех столбцов на странице есть два круга. Внутренний круг - это маска для видимой области прожектора при переключении. Внешний круг - это маска для черного наложения, пока мы все еще отслеживаем мышь.
Проблема в том, что они не стоят на одном уровне, между ними есть крошечное пространство, и это сводит меня с ума. Есть идеи, как избавиться от этого пробела? Я играл в округление значений с плавающей точкой, чтобы все значения позиционирования и размеров были целочисленными, но я пока не нашел правильную комбинацию.
Вот ссылка на страницу: введите описание ссылки здесь
Я использую плагин jQuery SVG, но вот код в любом случае:
// Create an SVG for each .svg_mask
$('.svg_mask').each(function (key) {
$(this).css({
'min-height' :cr*4.5,
'min-width' : cr*4.5
}).css({
marginLeft: -$(this).width()/2,
marginTop: -$(this).height()/2
});
$(this).svg();
var tw = $(this).outerWidth();
var th = $(this).outerHeight();
// circle mask
var cm = Math.round(cr*3.14*1.25); // obsolete?
var rx = tw/2-cm/2; // position from left rect edge
var cx = tw/2; // position from left center
var cri = cr*1.2; //inner circle mask radius
var cro = tw/2; // out circle mask radius
var px = $(this).offset().left; // position for page
var py = $(this).offset().top; // position for page
this.pcx = px + cx; // relative pos center
this.pcy = py + cx; // relative pos center
$('svg', this).attr('viewBox', '0 0 '+tw+' '+th);
var svg = $(this).svg('get');
var defs = svg.defs();
var filter = svg.filter(defs, 'blur'+key, 0, 0, tw, th,
{filterUnits: 'userSpaceOnUse'});
svg.filters.gaussianBlur(filter, 'blur'+key,
'SourceAlpha', 10);
// Our spotlight & rect
var circle_mask = svg.mask(defs, 'circle_mask'+key, 0, 0, tw, th,
{maskUnits: 'userSpaceOnUse'});
svg.circle(circle_mask, cx, cx, cro,
{strokeWidth: 0, fill:'white', fillOpacity: 0.8, strokeWidth: 0});
this.circle = svg.circle(circle_mask, 0, 0, cri,
{strokeWidth: 0, fill: 'black', fillOpacity: 1, filter: 'url(#blur'+key+')'});
// Draw this rect
svg.circle(cx, cx, cro,
{strokeWidth: 0, mask: 'url(#circle_mask'+key+')', opacity: 1.0});
// mask this region off to background svg
svg.circle(window.mask, this.pcx, this.pcy, cro,
{strokeWidth: 0, fill: 'black'});
});
Любая помощь приветствуется.
Обновление
Я не нашел решения, позволяющего плавно замаскировать круг и составить другой круг, чтобы он поместился в пространстве, но дизайн изменился, и мне больше не нужно решение для этого конкретного проекта. Хотя было бы неплохо понять, как добиться эффекта.
Ссылка теперь отражает новый дизайн с новой проблемой ...