SVG clip-path для создания «отрисованного вручную» div - проблемы совместимости и альтернативы? - PullRequest
Новая
       8

SVG clip-path для создания «отрисованного вручную» div - проблемы совместимости и альтернативы?

0 голосов
/ 13 сентября 2018

Я хочу воссоздать div стиля "рисованный / мазок" на белом фоне, как на этом изображении:

enter image description here

Казалось, что он идеально подходит для стиля clip-path -CSS. Я пошел дальше и создал SVG, использовал атрибут clipPathUnits="objectBoundingBox" и столкнулся с первой проблемой. При использовании clip-path: url(urlto.svg#pathid); он не рендерился, но когда я включил SVG на страницу (скрытый), он работал. Я прочитал это несколько раз на StackOverflow, но никогда не читал никакого решения для этого. Это нормальное поведение?

Как уже говорилось, я получил его для работы со встроенным в сайт SVG, но, как видно из спецификации документации функциональности clip-path, у WebKit (Safari и iOS в целом) есть проблемы с правильным отображением. Я попробовал префикс, но это тоже не сработало.

Мой вопрос будет таким: как вы думаете, есть ли вероятность, что я что-то пропустил в SVG или в спецификации CSS, что могло бы заставить его работать в Safari? Или, если нет, думаете ли вы, что проблему можно решить с помощью атрибута mask-border? Имеет ли это значение для рендеринга? Мне не удалось найти текущую настройку, чтобы сделать эту работу - в основном, как я понял, мне нужно было бы включить тот же SVG и правильно «разрезать» его (9 полей). Однако я не понимаю, где эта граница добавлена, так как мне нужно, чтобы она была «внутрь» от div.

Надеюсь, это как-то имеет смысл.

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

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Для дальнейшего использования: в итоге я использовал, пожалуй, самый простой метод для моего варианта использования, как предложено пользователем Timlind - еще раз спасибо за ваш комментарий! 

<div id="container">
   # CONTENT #
  <div id="cover"><img src="path/to/svg"></div>
</div>

CSS прост: 

#container {
    position: relative;
}

#cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

обратите внимание на определение viewbox внутри SVG, чтобы упростить масштабирование (без фиксирования и с высотой в определении svg) и установить preserveAspectRatio="none" (для этого варианта использования).

pointer-events: none позволяет пользователям "кликать" по оверлею svg.

0 голосов
/ 13 сентября 2018

В качестве альтернативы вы можете сделать это, используя CSS и blend-режимы, если это подходит вам: 

div{position:relative;width:300px;height:300px;}
div img{position:absolute;
}
img:nth-of-type(2){mix-blend-mode: screen;}
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="Darwin" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/brush.gif" alt="brush" />
</div>
...