Как использовать SVG clipPath с Pattern через свойство CSS clip-path? - PullRequest
Новая
       81

Как использовать SVG clipPath с Pattern через свойство CSS clip-path?

1 голос
/ 17 марта 2020

Начальная SVG цифра с pattern: 

<svg width="200" height="200" viewBox="0 0 100 100">
  <defs>
    <pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
      <circle cx="2" cy="2" fill="white" r="0.8"></circle>
    </pattern>
    <mask id="img-dotted-mask">
      <rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
    </mask>
  </defs>
  <path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>

Необходимо достичь:

Один экземпляр фигуры SVG с pattern для ссылки с CSS в качестве clip-path.

Я пытался создать элемент SVG clipPath и привязать к CSS clip-path таким образом 

.figure {
  width: 300px;
  height: 300px;
  clip-path: url(#img-dotted-clip-path);
  background-color: #1063B1;
}
<div class="figure"></div>

<svg width="0" height="0" viewBox="0 0 100 100">
  <defs>
    <clipPath
      clipPathUnits="objectBoundingBox"
      id="img-dotted-clip-path"> 
        <pattern
        patternUnits="objectBoundingBox"
        patternContentUnits="objectBoundingBox"
        x="0" y="0" height="0.1" width="0.1">
        <circle cx="0" cy="0" fill="white" r="0.5"></circle>
      </pattern>
    </clipPath>
  </defs>
</svg>

Ничего не происходит. Ожидаемый результат - такой же, как и в предыдущем фрагменте.

Для сравнения:

Если я использую SVG rect - CSS clip-path работает. Если pattern - не 

.figure {
  width: 300px;
  height: 300px;
  clip-path: url(#img-dotted-clip-path);
  background-color: #1063B1;
}
<div class="figure"></div>

<svg width="0" height="0" viewBox="0 0 100 100">
  <defs>
    <clipPath
      clipPathUnits="objectBoundingBox"
      id="img-dotted-clip-path"> 
        <rect width="1" height="1"></rect>
    </clipPath>
  </defs>
</svg>

Ответы [ 2 ]

3 голосов
/ 17 марта 2020

Вы можете воссоздать то же самое, используя маску в сочетании с радиальным градиентом 

.figure {
  width: 300px;
  height: 300px;
  background:linear-gradient(to right,red,#1063B1);  
                          /*radius here                           size here*/
  -webkit-mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
          mask:radial-gradient(3px, #fff 97%,transparent 100%) 0 0/20px 20px;
}


body {
  background:#f2f2f2;
}
<div class="figure"></div>

Или рассмотрите SVG внутри свойства маски. Обязательно экранируйте # и правильно установите окно просмотра и ширину / высоту для идеального повторения 

.figure {
  width: 300px;
  height: 300px;
  background:linear-gradient(to right,red,#1063B1);  
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="192" viewBox="0 0 100 90"><defs><pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%"><circle cx="2" cy="2" fill="white" r="0.8"></circle></pattern><mask id="img-dotted-mask"><rect width="100" height="100" fill="url(%23img-dotted-dots)"></rect></mask></defs><path d="M0 0 H 100 V 100 H 0 Z" mask="url(%23img-dotted-mask)" fill="%231063B1"></path></svg>');
}


body {
  background:#f2f2f2;
}
<div class="figure"></div>
2 голосов
/ 17 марта 2020

В пути клипа допустимы только:

  • Элементы формы («круг», «эллипс», «линия», «путь», «многоугольник», «полилиния»). , 'rect')
  • 'text'
  • 'use'

Кроме того, вы можете использовать элементы анимации et c для анимации пути клипа. Однако используются только формы этих элементов . Такие эффекты, как шаблоны, фильтры и т. Д. c, игнорируются.

Единственный способ получить эффект, который вы хотите использовать в качестве обтравочного контура, - это добавить множество элементов <circle> к вашему <clipPath>. . 

<clipPath>
   <circle>
   <circle>
   <circle>
   <circle>
   ... etc ...
</clipPath>

Но вместо этого вы можете использовать маску. Маски допускают узоры. 

.figure {
  width: 300px;
  height: 300px;
  -webkit-mask: url(#img-dotted-mask);
          mask: url(#img-dotted-mask);
  background-color: #1063B1;
}
<p>This only works in Firefox</p>

<div class="figure"></div>

<svg width="0" height="0">
  <defs>
    <pattern id="img-dotted-pattern"
      viewBox="0 0 1 1"
      patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <rect width="1" height="1" fill="black"/>
      <circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
    </pattern>

    <mask id="img-dotted-mask">
      <rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
    </mask>
  </defs>
</svg>

Однако inline SVG-маски, примененные к HTML элементам, как мой пример выше, работают только в Firefox. Чтобы маска SVG работала в Chrome, вам нужно будет использовать mask или mask-image с внешним URL-адресом или URL-адресом данных (как это сделал Temani в своем ответе).

...