Сообщений в теме: 2

[woodman]

Есть такое свойство для маскировки части изображения как clip-path. Работает следующим образом:

 

1. Создаем блок или картинку, которую будем маскировать и присваиваем класс

<div class="clipMe">I AM SQUARE</div>

2. Добавляем в этот же файл описание кривой из svg-файла

<div class="clipMe">I AM SQUARE</div>

<svg height="0" width="0">

    <defs>
        <clipPath id="svgPath">
            <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

 

3. Выносим в стили наш класс и добавляем свойство маскировки

.clipMe {
     clip-path: url(#svgPath);
     ....другие свойства для размера и цвета...;
}

...и все прекрасно работает.

 

 

Однако, используя JBlank (less), вместо того, чтоб искать путь svg в коде файла, ищется файл с названием #svgPath

 

код из инспектора:

clip-path: url("http://local/templates/jblank/less/#svgPath");

а должно быть

clip-path: url("#svgPath");

Как и где поправить эту беду?

[woodman]

пришел к выводу, что нужно писать полный путь к странице, т.е. примерно так:

clip-path: url("http://local-site/#svgPath");

но на JBlanke не работает, хоть умри. На дефолтном protostar'e все замечательно в FF.

 

P.S. для web-kit используется префикс и путь описывается непосредственно в стиле css, поэтому в хроме и опере проблем нет.

[woodman]

Я разобрался. Шаблон тут ни при чем.

 

В общем, если вдруг кому нужно, то правильная запись для клиппинга элемента для ФФ такая:

clip-path: url('http://local/templates/jblank/images/file.svg#svgPath');

где file.svg - это собственно файл с путем, а #svgPath - идентификатор clipPath